css常见样式命名规则

2019-10-23

前言

也许你曾经看到过很多样式命名规则，也参考了我们制定的命名规范，但是大部分的具体样式还是不知道如何命名，主要思想或者标准是什么，也就是前面.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

OOCSS是object-oriented CSS的缩写. 主要有两个意思:
结构和设计分离
容器和内容分离
使用这种结构, 开发人员获得可以在不同地方使用的CSS类.
通常这时候总是会有两个消息(一个好消息和一个不好的消息):
好消息: 通过复用来减少代码量(DRY原则)
不好的消息: 维护非常困难(复杂). 当你修改某一个具体的元素的样式的时候, 大部分情况下, 除了修改CSS本身(因为多数的CSS类是通用的), 你还不得不添加更多的标记类(markup).
另外, OOCSS本身并不提供具体的规则, 而是抽象的建议, 所以这种方法在生产中的最终结果会有所不同.
事实上, OOCSS的想法启发了其他人创建自己的, 更具体的代码结构化方式.
具体的延伸就是我们将全局样式，布局、间距、模块样式区分开来，并辅以科学准确约定的方式。

SmacSS 可扩展和模块化结构的 CSS

SMACSS是可扩展和模块化结构CSS的简称. 该方法的主要目标是减少代码量并简化代码维护.

Jonathan Snook把它归纳为5个部分:

基本规则(Base rules): 为网址的主要元素设置样式, 如body, input, button, ul, ol等. 在这一步中, 我们主要使用html标签和属性选择器, 在特殊情况下, 使用CSS类(如: 如果您有JAVAScript-Style选择);
布局规则(Layout rules): 主要是些全局元素, 顶部, 页脚, 边栏等模块的大小. Jonathan建议使用ID选择器, 因为这些模块不太可能在同一个页面上出现多次. 然而, 本文作者认为这是个很不好的习惯(每当ID出现在样式文中, 感觉世界顿时变得灰暗, 有一股莫名的哀伤).
模块规则(Modules rules): 模块(类似于卡片布局)可以在一个页面中使用多次. 对于模块CSS类, 不建议使用ID和tag选择器(这是为了方便重用以及上下文独立).
状态规则(State rules): 在这一步中, 规定了模块的各种状态以及网站的基础部分. 这是唯一允许使用"!important"的地方.
主题规则(Theme rules): 设计您可能需要更换的样式.
我们推荐为属于某个组的CSS类定义命名空间, 并为 JavaScript中使用的CSS类使用单独的命名空间.

Atomic CSS 原子 CSS

Atomic CSS是CSS架构的一种方法, 它的好处是写出基于视觉功能的小的, 单用途CSS类.这种类通常也被称为原子类。
使用Atomic CSS, 为每个可重用的属性创建单独的CSS类. 例如, margin-top: 1px; 就可以创建一个类似于mt-1的CSS类, 或者width: 200px; 对应的CSS类为w-200.这样设计可以最大程度的统一页面的共用样式，便于管理，尤其在你采用了预处理器之后，可以使用继承，拓展等方式快速使用某常用代码段或者样式模块，最大程度的减少css代码数量。
存在的缺点:
CSS类名是属性名称的描述, 而不是元素的自然语义. 这种想象很容易使人在开发过程中变得迷茫. 开发本身也十分容易复杂化.
直接在HTML中进行显示设置.
由于这些短板的存在, 这种做法遭到了大量的批评. 然而, 这种做法对于大型项目来说是有一定效果的.
此外, Atomic CSS在各种框架中被用于校正元素样式以及某些层(layers)的其他方法.

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代码规范中。