前言
也许你曾经看到过很多样式命名规则,也参考了我们制定的命名规范,但是大部分的具体样式还是不知道如何命名,主要思想或者标准是什么,也就是前面.m-panel-后面的应该如何命名,子模块与父模块依赖关系怎么体现,等等类似的问题。如何友好科学的解决问题,能够与最大程度的降低我们后期对样式的维护难度。
本文将带你了解目前前端基本的命名规则,各自的优劣,然后我们会给出具体的方案。
一 指定的格式
驼峰式命名
类似于.mLayerTitle这样形式的,但这个仅仅是格式,不代表命名规则,和应该如何去思考用什么名称。
以-格式分割开
类似于.m-layer-title ,这种格式也是很常见的。同样也是只有格式,没有命名方式的核心思想的。
二 样式组织思想
BEM(block+element+modify)
块级,元素,修改,它的主要设计思路是需要定义块级,对于子元素分别利用_区分,对于修饰的部分增加--实现。对于比较复杂的块级元素用-实现连接。举证如下:
site-nav site-nav_logo site-nav_login site-nav--active site-nav--active
OOcss
SmacSS 可扩展和模块化结构的 CSS
SMACSS是可扩展和模块化结构CSS的简称. 该方法的主要目标是减少代码量并简化代码维护.
Jonathan Snook把它归纳为5个部分:
Atomic CSS 原子 CSS
MCSS 多层 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代码规范中。