CSS选择器的命名规范

1.模块化命名
例如：

与布局相关的样式以“g”为开头。如“g-content”和“g-header”；
与挂钩相关的样式以“j”为开头。如“j-open”和“j-request”；
与元件相关的样式以“m”为开头。如“m-dropMenu”和“m-slider”；
与状态相关的样式以“s”为开头。如“s-current”和“s-selected”；
与工具相关的样式以“u”为开头。如“u-clearfix”和“u-ellipsis”。

“工具”是指与业务逻辑解耦的，能够重用的样式；“元件”是指自定义的可重用且可移植的基本网页元素；“挂钩”是指供JavaScript操纵的样式。

2.选择器皆为小写形式
推荐的写法：

g-first-header
{
 line-height: 16px;
}

不推荐的写法：

.g-FirstHeader
{
 line-height: 16px;
}

3.每个选择器独占一列
除最后一个选择器外，其它每一列选择器均以逗号结尾。若用到兄弟元素选择器，则相关符号的左右两端均留出一个半角空格。

推荐的写法：

.g-first-header,
.g-second-header-1 > .g-second-header-2
{
 border: 2px solid #C3C3C3;
}

不推荐的写法：

.g-first-header, .g-second-header-1>.g-second-header-2
{
 border: 2px solid #C3C3C3;
}

4.避开HTML标记
构建选择器时应尽量采用语义明确的类别名称，避开HTML标记，因为一旦HTML的结构产生更动，则与此对应的样式也就无效了。尽量将样式与结构分离，这样会使得阶层式样式表在日后更易被维护。

推荐的写法：

.g-content .g-item
{
 flex-basis: 20%;
}

不推荐的写法：

.g-content li
{
 flex-basis: 20%;
}

5.少用ID
ID的唯一性注定了它所对应的元素的样式就是一次性的，无法重用，一旦HTML结构发生变化，套用ID的选择器就要随之修改。另一个重要的原因是：ID的权重值是最高的，这可能会导致日后添加的样式无法复写原先的样式。

推荐的写法：

.g-special-content
{
 height: 100px;
 width: 300px;
}

不推荐的写法：

#special-content
{
 height: 100px;
 width: 300px;
}