如果规范的命名css名称

本篇介绍几种CSS命名规范。

学习HTML和学习其他知识一样

都会遇到困难与瓶颈期，关键在于不放弃。

学习的动力在于，你为什么学，是跟风？

还是自己心里真的喜欢？

如果轻言放弃，那么就根本不是喜欢。

真正从心里认可的事情，是无论如何都会想办法去做的。

一、NEC (nice easy css)

网易前端CSS开源项目

1.1 样式分类

重置和默认：reset + base

布局(g-) 例如头部，尾部，主体，侧栏等

模块(m-) 较大整体，如登录注册，搜索等

元件(u-) 不可再分个体，例如按钮，input框等

功能(f-) 使用频率较高样式，例如清除浮动

皮肤(s-) 例如文字色，背景色，边框色等

状态(z-) 例如hover，选中等

j- 专门用于js获取节点，勿占用

举个例子：

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 最佳实践

统一语义理解及命名:

学习HTML和学习其他知识一样

都会遇到困难与瓶颈期，关键在于不放弃。

学习的动力在于，你为什么学，是跟风？

还是自己心里真的喜欢？

如果轻言放弃，那么就根本不是喜欢。

真正从心里认可的事情，是无论如何都会想办法去做的。

1.6 典型错误

不要以没有语义的标签作为选择器

.m-nav div{}

不要越级控制

.m-xxx .m-yyy a{}

不要在页面布局中使用后代选择器

.g-xxx .btn{}

不要用页面布局去控制模块或者元件

.g-xxx .m-yyy

二、AliceUI规范

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

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

通用模块

页面样式 (继承通用模块)

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

2.1 命名规范

用“-”做命名空间上的区隔，最小化两个模块之间的命名冲突

第一个前缀作为通用模块标识，各业务线选取自己的前缀

模块名是必选的，要求表意的

模块内部类名继承上层名称

<div>

<h3></h3>

<p></p>

</div>

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

<div>

<h3></h3>

<p></p>

</div>

参看模块的样式：

Alice类命名规范

一个简单的使用Alice的例子：

网页链接...

三、BEM(Block,Element,Modifier)

Yandex团队提出的前端CSS命名方法论。

优点：less confusing & recognizable

3.1 BEM定义

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

例如一个搜索块；

Element: 一个元素是块的一部分，具有某种功能。元素是依赖上下文的，它们只有处于它们应该属于的块的上下文时才有意义。

例如搜索块里的input框或button；

Modifier: 修饰符作为一个块或者一个元素的属性，代表这个块或者是元素在外观或是行为上的改变。

例如tab选中高亮。

学习HTML和学习其他知识一样

都会遇到困难与瓶颈期，关键在于不放弃。

学习的动力在于，你为什么学，是跟风？

还是自己心里真的喜欢？

如果轻言放弃，那么就根本不是喜欢。

真正从心里认可的事情，是无论如何都会想办法去做的。

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>

<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压缩将会让我们消除对文件体积的担忧），但是它依旧强大。

四、其他命名规范

OOCSS、SMACSS、SUITCSS、Atomic等

OOCSS:

减少对 HTML 结构的依赖

增加 CSS class 重复性的使用

几种命名规范比较：

NEC 与 AliceUI 在命名上相反的点：

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

当前我们的网站略有OOCSS思想

BEM更概括，NEC中的g-，m-相当于BEM的block，u-相当于BEM的element, f-，z-,s-相当于BEM的modifier.