CSS for State

个人认为css的选择器标识分两类。

* 实体
    * 模块 .head-pic, .sub-btn, etc. 
    * 类  .btn, h1, etc.

* 状态 .enable, .disable, .has-img, .no-img, etc.

像这个图一样,紫色的是状态,黑色的是实体。

css-status

css-status

实体标识就是放在所标识的标签上的~

而状态标识 就应该作为一种配置选项放在模块级别下的全局位置。
放在全局下的好处应该就是这样模块下的所有实体的状态是透明的;而且是可以统一读取; 更重要的是减少优先级混乱的可能,因为可以在同一个位置根据不同的状态配置不同的规则。

当然,这样的问题是.pic在变成一个模块的时候就不方便再独立维护一个状态。这就需要仔细斟酌状态的应用范围了。

虽然说上面图里面的情况只需要给.content用BFC就能解决问题。但是问题再复杂点呢?比如我要根据给.no-img情况下的.content用更大的字体?

当然原则应该还是在模块级别上维护状态,如果pic形成独立的模块,还是得在.pic上加状态标识。

不知道啊,以后再看看。。。

以上,请指责。

2012-09-30