CSS命名规范

本篇介绍几种CSS命名规范。（规范详细请参考底部References)

一、NEC (nice easy css)

网易前端CSS开源项目

1.1 样式分类

重置和默认：reset + base
布局(g-) 例如头部，尾部，主体，侧栏等
模块(m-) 较大整体，如登录注册，搜索等
元件(u-) 不可再分个体，例如按钮，input框等
功能(f-) 使用频率较高样式，例如清除浮动
皮肤(s-) 例如文字色，背景色，边框色等
状态(z-) 例如hover，选中等
j- 专门用于js获取节点，勿占用

举个例子：

CSS命名规范

1.2 命名规则

样式命名时始终以以上几类（g-等）开头，然后使用后代选择器
约定后代选择器不使用单个字母+“-”的形式，不使用单个字母
通过使用后代选择器，==后代选择器不需要考虑名字是否已被使用==，因为只在当前模块生效
（还是有可能会污染，注意避免）
命名简约不失语义 .green2 --bad .wrap2 --good
相同语义的不同类命名 —可直接加数字或字母区分 .m-list .m-list2
出现率高的做成基类，再做扩展类：
基类+扩展类：class="m-list m-list-2” class="u-btn u-btn-hover”

1.3 代码格式

选择器，属性和值小写
NEC规范推荐单行写完一个选择器定义（sass，不适用）
尽量不要省略分号
省略0时的单位
十六进制表示颜色，尽量缩写
根据属性重要性顺序书写
按布局、盒模型，修饰的顺序
推荐插件css comb （sublime text 插件）

1.4 优化方案

背景图优化合并
- 图片本身的优化
  -- 色彩过于丰富无透明要求 --> jpg较高质量

-- 色彩过于丰富且有透明或者阴影要求--> png24
-- 色彩不太丰富且无论有无透明要求--> png8

多张图片合并的优化
-- 排列方式

-- 合并后图片大小不宜超过50k，
-- 为了保持一致性，记得保留PSD原图

如果CSS能做到，不要用js
css控制视觉变化，js只需要更改classname

1.5 最佳实践

统一语义理解及命名:

CSS命名规范

1.6 典型错误

不要以没有语义的标签作为选择器
.m-nav div{}
不要越级控制
.m-xxx .m-yyy a{}
不要在页面布局中使用后代选择器
.g-xxx .btn{}
不要用页面布局去控制模块或者元件
.g-xxx .m-yyy

1.7 使用NEC的网站

http://nec.netease.com/case
http://yuedu.163.com/

二、AliceUI规范

Alice的样式模块组织方式追求扁平化方式，分为三个层级：

基础框架（reset+iconfont+栅格）

通用模块
页面样式 (继承通用模块)
任何模块在页面中应该像一个盒模型，不和页面的其他元素互相影响，完美的Alice模块应该是一个“口”字型

CSS命名规范

2.1 命名规范

用“-”做命名空间上的区隔，最小化两个模块之间的命名冲突
第一个前缀作为通用模块标识，各业务线选取自己的前缀
模块名是必选的，要求表意的
模块内部类名继承上层名称

<div class="ui-box">
   <h3 class="ui-box-title"></h3>
   <p class="ui-box-conent"></p>
</div>

不推荐这样写，很容易造成命名冲突：

<div class="ui-box">
   <h3 class="title"></h3>
   <p class="conent"></p>
</div>

参看模块的样式：

CSS命名规范

Alice类命名规范

CSS命名规范

一个简单的使用Alice的例子：
https://github.com/aliceui/al...

三、BEM(Block,Element,Modifier)

Yandex团队提出的前端CSS命名方法论。
优点：less confusing & recognizable

3.1 BEM定义

Block：一个块是一个独立的实体，块可以包含其他块；
例如一个搜索块；

Element: 一个元素是块的一部分，具有某种功能。元素是依赖上下文的，它们只有处于它们应该属于的块的上下文时才有意义。
例如搜索块里的input框或button；
Modifier: 修饰符作为一个块或者一个元素的属性，代表这个块或者是元素在外观或是行为上的改变。
例如tab选中高亮。

3.2 BEM命名约定

一种命名规则：

块名：block-name，它为元素和修饰符定义了命名空间
元素名：与块名使用“__”连接(double underscore)，block-name__ele-name
修饰符名：使用“_”连接(single underscore)
对于Boolean类型修饰符 —— owner-name_mod-name;

对于key-value类型的修饰符 —— owner-name_mod-name_mod-val;

举个例子：
html：

<form class="form form_login form_theme_forest">
    <input class="form__input">
    <input class="form__submit form__submit_disabled">
</form>

CSS:

.form {}
.form_theme_forest {}
.form_login {}
.form__input {}
.form__submit {}
.form__submit_disabled {}

其他命名规则也有很多，例如：

Two dash style
例如：block-name__elem-name--mod-name

CamelCase style
例如MyBlock__SomeElem_modName_modVal

--BEM提供一种规范，具体命名规则可以根据个人偏好选择

BEM的关键是光凭名字就可以判断某个标记是用来干什么的。通过浏览HTML代码中的class属性，你就能够明白模块之间是如何关联的：有一些仅仅是组件，有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。
BEM可能看上去有点滑稽，而且有可能导致我们输入更长的文本（大部分编辑器都有自动补全功能，而且gzip压缩将会让我们消除对文件体积的担忧），但是它依旧强大。

3.3 使用BEM的网站

http://company.yandex.ru/
https://hh.ru/

四、其他命名规范

OOCSS、SMACSS、SUITCSS、Atomic等
OOCSS:

减少对 HTML 结构的依赖
增加 CSS class 重复性的使用
http://www.w3cplus.com/css/oo...

几种命名规范比较：
NEC 与 AliceUI 在命名上相反的点：

.m-list .title 可以放心使用，以为都是在模块内,但AliceUI不推荐

当前我们的网站略有OOCSS思想
BEM更概括，NEC中的g-，m-相当于BEM的block，u-相当于BEM的element, f-，z-,s-相当于BEM的modifier.

References

[1].http://nec.netease.com/
[2].https://github.com/aliceui/al...
[3].http://getbem.com/introduction/ (BEM)
[4].https://en.bem.info/methodolo...
**http://www.w3cplus.com/css/be...中文)
[5].https://segmentfault.com/a/11... (BEM)

CSS命名规范

一、NEC (nice easy css)

1.1 样式分类

1.2 命名规则

1.3 代码格式

1.4 优化方案

1.5 最佳实践

1.6 典型错误

1.7 使用NEC的网站

二、AliceUI规范

2.1 命名规范

三、BEM(Block,Element,Modifier)

3.1 BEM定义

3.2 BEM命名约定

3.3 使用BEM的网站

四、其他命名规范

References

相关推荐