基于active状态类名的web交互开发

demo：

默认是这样的：

当我们点击更多按钮后，会以CSS3动画的方式展开剩余所有文字信息，如下动图：

下面我们看下关键的CSS代码，这个.active是如何自身无样式的：

.box {
    max-height: 80px;
    transition: max-height .25s;
    overflow: hidden;
}
.box.active {
    max-height: 200px;
}
.active > .more {
    display: none;
}

　　

more.onclick = function () {
    box.className = box.className + ' active';
};

　　

可以看到，当我们点击按钮后，盒子变高，以及更多元素隐藏，全部都是通过和.active发生关系后发生的，而不是.active自己的样式。例如，我们盒子实现的200px以内任意高度的动画效果，是通过.box.active组合类名触发的，

用中文解释就是.box元素同时有.active状态的时候，样式如何如何…

同样，.active > .more表示，当我的爸爸状态为.active的时候，我隐藏。

实现了真正意义上的样式和行为分离！

优点：

.active本质上扮演的角色不是类名样式，而是一个标识符！

1. 省了很多想命名的脑细胞

   妈妈再也不要担心有些单词不知道怎么翻译啦~~

2. CSS和JS代码可读性更强了

   一旦在CSS或JS中看到'.active'，大家都知道，页面这块内容要变形了；

3. JS代码量更少了

   例如，我们在全局，或者顶层局部定义这么一个变量：

   var ACTIVE = 'active';

   则，由于我们所有的交互都只要这一个类名，因此，当我们JS压缩的时候，其压缩率要高很多，也更好维护。加入说页面中有10个UI交互效果，原先是10个不能压缩的字符串，现在变成了1个，代码量自然要少。

4. 类名压缩成为了可能

 

 

 

来自：http://www.zhangxinxu.com/wordpress/2016/10/classname-active-checked-web-ux-develop/