前端类名命名规范

前端经常遇到这样的项目：经过多个开发者的“修补”之后到了自己的手中，又或者是支撑别人开发的项目，那么往往就会遇到标签命名不一致的情况。标准统一的命名规范不仅可以帮助后开发者更好得理解样式用途，而且在前端性能优化层面也是大有脾益。
目前项目中遇到过的类名命名方式有：

• 拼音缩写结合英文单词翻译

<div class="ss-header"></div>

• 英文单词翻译拼接

// 详情信息
<div class="detail-info"></div>

• 英文单词翻译驼峰命名

// 详情信息
<div class="detailInfo"></div>

这两种方式是目前是遇到的命名方式最多的，但是这些方式是不够规范的。那么介绍一种CSS类名命名规范：BEM。BEM是一种CSS的书写规范，它的名称是由三个单词的首字母组成的，分别是块(Block)、元素(Element)和修饰符(Modifier)。理论上它希望每行CSS代码只有一个选择器，这就是为了降低选择器的复杂性，对选择器的命名要求通过以下三个符号的组合来实现。

• 中画线(-)：仅作为连字符使用，表示某个块或者子元素的多个单词之间的连字符。
• 单下画线(_)：作为描述一个块或者其子元素的一种状态。
• 双下画线(__)：作为连接块与块的子元素。

首先给出一个基于BEM的选择器命名形式，然受再分别看块、元素与修饰符的含义与使用示例。

// BEM 命名示例
<div class="type-block__element_modifier"></div>

1. 块
   通常来说，凡是独立的页面元素，无论是简单还是复杂都可以被视作一个块，在HTML文档中会用一个唯一的类名来表示这个块。具体命名规则包括三个：只能使用类选择器，而不使用ID选择器；每个块应定义一个前缀用来表示命名空间；每条样式规则必须属于一个块。比如一个自定义列表就可以视作为一个块，其类名匹配规则可以写为：

   .myList {}
   

2. 元素
   元素指的就是块中的元素，且子元素也被视作块的直接子元素，其类名需要使用块的名称作为前缀。以上面自定义列表中的子元素类名写法为例，与常规写法对比如下：

   // 常规写法
   .myList {}
   .myList .item {}
   
   // BEM 写法
   .myList {}
   .myList__item {}
   

3. 修饰符
   修饰符可以看作是块或者元素的某个特定状态，以按钮为例，它可能包含大、中、小三种默认尺寸及自定义尺寸，对此可使用small,normal,big或size-N来修饰具体按钮的选择器类名，示例如下：

   // 自定义列表下子元素大、中、小三种尺寸的类选择器
   .myList__item_big {}
   .myList__item_normal {}
   .myList__item_small {}
   // 带自定义尺寸的修饰符
   .myList__item_size-10 {}
   

BEM样式编码规范建议所有元素都被单一的选择器修饰，从CSS代码结构角度来说这样不但更加清晰，而且由于样式查找得到了简化，渲染阶段的样式计算性能也会得到提升。