css常见样式命名规则( 二 ) _css

MCSS 多层 CSS

文章插图

MCSS指的是多层CSS(Multilayer CSS). 这种样式写法建议将样式分成多个部分, 每个部分称为层(layers).
第0层或基础(Zero layer or foundation), 负责重置浏览器样式的代码(如: reset.css或者normalize.css);
基层(Base layer), 包括可重用元素的样式: buttons, input, hints等等.
项目层(Project layer), 包括单独的模块和"上下文" - 根据用户端浏览器或用于浏览的设备, 用户权限等对元素的样式进行调整.
装饰层(Cosmetic layer), 使用OOCSS风格来书写样式, 对元素外观做微小的调整. 建议仅留下影响外观的风格, 而不能破坏网站的布局(例如颜色和非关键缩进等).
层与层之间的交互层次是非常重要的:
在基层(Base layer)中定义中性的样式, 并且不影响其它层.
基层(Base layer)中的元素只能影响基层的CSS类.
项目层(Project layer)中的元素可以影响基层和项目层.
装饰层(Cosmetic layer)是以描述性OOCSS类("atomic"类)的形式进行设计, 不会影响其他CSS代码, 而是在标记中有选择的使用.

AMCSS 属性模块 CSS

文章插图

AMCSS是"属性模块CSS"的缩写.
先让我们来看一个例子:
<div class="button button--large button--blue">Button</div>
如果这样写CSS类的链, 是有点复杂的, 所以让我们通过属性来为这些CSS类分组. 分组后就变成下面这样了:
<div button="large blue">Button</div>
为了避免属性名称冲突, 好的方式是为属性加上命名空间. 然后, 我们的button代码就变成这样了:
<div am-button="large blue">Button</div>
如果您使用了验证器去检查你的代码, 并且它(验证器)不喜欢类似于am-button这样的属性名称, 你可以把属性的命名空间(am-)换成data-. 例如: data-button.
使用一个不是那么常用的选择器"~="(IE7以上都支持), 它类似于CSS类属性: 所有属性值包含指定的单词(以空格分开)的元素都会被选中. 所以, 选择器[class ~= "link"][class~= "button"]相对于选择器a.link.button. 这种选择器(选择方式)同样适用于属性.
因此, CSS代码就可以这样写:
/* CSS类选择器 */.button { ... }.button--large { ... }.button--blue { ... }/* CSS属性选择器 */[am-button] { ... }[am-button ~= "large"] { ... }[am-button ~= "blue"] { ... }如果您认为这段代码十分的不寻常, 可以尝试使用较为温和的AMCSS 形式:
<div am-button am-button-large am-button-blue>Button</div>
FUN
FUN代表的是"Flat hierarchy of selectors, Utility styles, Name-spaced components."
每个名称前面的字母都代表着一定的原则:
F, 选择器的扁平的层次结构: 建议使用CSS类选择元素(items), 避免不必要的级联, 杜绝使用id.
U, 实用(功能)样式: 鼓励创建原子(atomic)样式来解决典型的修正(微调)任务, 例如: w100表示width: 100%; 或者fr表示float: right;
N, 名称分割组件: Ben建议添加命名空间来指定特定模块元素的样式. 这种方法将避免类的中重叠.
一些开发人员注意到, 使用这种原则来编写CSS代码是非常方便和容易维护的; 在某种程度上, 作者汲取了SMACSS的精华, 以简单并且简洁的方式阐述了这一技术.
这种方式对项目和代码结构施加了很多的要求, 它仅仅建立了记录选择器的首选形式以及它们在标记中的使用方式. 但在小型项目中, 这些规则足以帮助构建高质量的CSS代码.
结论
这些样式的的设计思想中没有完全符合实际需求的，项目实践中建议根据自己的业务以及成员需求，选择合适的样式明明规则，可以是上面一种，也可以是其中几种混合的结果，最终目的都是让你的样式便于维护而已。
这里，个人建议的是用SMAC+Atomic，并且综合归结到了基本的css代码规范中。

【css常见样式命名规则】