CSS编码规范

本篇文章是基于王叨叨大佬师父维护的文档梳理的，有兴趣可以去看一下原文CSS编码规范。

其实不管是HTML也好，还是CSS也好，有些规范其实是共通的。

1. 命名

class的命名应该偏向语义化，不是为了样式而去命名，而是通过class的命名能清楚了解页面结构，并定位到该位置。

也能避免多人合作时，命名冲突的问题。

【强制】 class命名遵循BEM命名思想。

解释：

当项目中如果没有使用样式局部作用域框架，就采用BEM命名思想，BEM的就是：块（block）、元素（element）、修饰符（modifier）。

BEM中有两种符号结构：“–”和“__”：

• 两个中横线“–”表示组件的状态或版本；
• 两个下划线“__”表示组件的里面后代组件；

如下：

.person {}
.person--female {}
.person__head {}

上面代码中：.person相当于是一个组件结构，.person–female相当于是.person的一个版本，.person__head相当于是.person里面的一个模块。

【推荐】 在对应的地方使用对应的命名。

解释：

• 以is命名：表示动态的、具有交互性质的状态。例如：.is-open、.is-active、.is-selected等。
• 以ui或者mod命名：表示可复用、移植的组件模块。例如：.ui-slider、.mod-drop-menu等。
• 以ext命名：表示对组件基类的视觉形态的扩展。例如：.ext-cover等

【推荐】 一般区块都可划分为头部、身体和尾部，因此可以分别以hd、bd、ft来划分

2. 代码风格

【建议】使用2个空格做一个缩进层级，不允许使用tab字符。

【强制】字母与符号之间必须有空格，若是逗号、句号等符号紧跟字母，这些符号前面不需要空格，但后面需要。

解释：

空格使用风格如下：

main > nav {
    padding: 10px;
    background: rgb(255, 0, 0);
}

【建议】 当一个样式，几个选择器共用时，逗号隔开的同时，每个选择器声明必须独占一行。

/* Not so great */
.post, .page, .comment {
  line-height: 1.5;
}

/* Better */
.post,
.page,
.comment {
  line-height: 1.5;
}

【强制】 属性定义另起一行，且分号结尾。

3. 选择器

【强制】 如无必要，不得为id、class选择器添加类型进行限制。

示例：

/* bad */
div.main {
    color: #f00;
}

/* good */
.main {
    color: #f00;
}

【建议】 选择器的嵌套层级应该不大于3级，位置靠后的的限定条件应尽可能精确。

【建议】 同一个选择器内的属性在书写时，应按功能进行分组。

属性书写优先顺序如下：

• 第一、Positioning Model布局方式、位置。相关属性包括：定位属性position、层级属性z-index、布局属性display、浮动属性float等。
• 第二、Box model盒模型。相关属性包括：宽width、高height、边框border、内外边距margin/padding、滑动框overflow等。
• 第三、Typographic文本排版。相关属性包括：font、line-height、text-align、word-wrap等。
• 第四、 Visual视觉外观。相关属性包括：background、color、list-style 、transform、animation等。
• 第五、如果包含content属性，应放在最前面。content属性就是在页面中某个位置插值的，通常与伪元素一起使用。

【强制】 属性选择器中的值、文本内容必须使用双引号包起来，不允许使用单引号。

【强制】 url()函数中的路径不加双引号

示例：

/* bad */
div[title='person'] {
    color: #f00;
    font-family: 'Microsoft YaHei';
    background: url("bg.png");
}

/* good */
div[title="person"] {
    color: #f00;
    font-family: "Microsoft YaHei";
    background: url(bg.png);
}

【强制】 不要过度简写属性，如果只需定义其中的某几个属性，而不是全部，尽量分开写。

解释：

过度的简写属性，会导致属性滥用。比如：我只需要定义一个外边距的上部为10px，就只需要定义margin上部分的属性即可。

/* bad */
div {
    margin: 10px;
}
/* good */
div {
    margin-top: 10px;
}

【强制】 当数值为0-1之间的小数时，省略整数部分的0；长度为0时必须省略单位。

示例：

/* bad */
div {
    opacity: 0.8;
    margin: 0px auto;
}
/* good */
div {
    opacity: .8;
    margin-top: 0 auto;
}

【强制】 rgb颜色必须使用十六进制表示：#xxxxxx，不允许使用rgb()；带有透明度的可以使用rgba()；颜色值不允许使用英文名称。

/* bad */
div {
    border-color: rgb(255, 0, 0);
    color: green;
}
/* good */
div {
    border-color: #f00;
    color: #0f0;
}

【建议】十六进制中的颜色的英文字符要小写。

解释：

尽量小写，但若是别人大写了，就大写，同一个项目要保持一致。

【强制】 背景图片设置位置时，必须同时给出水平和垂直方向的位置。

解释：

只给出一个方向的值时，另一个方向的值会被默认为center；为避免理解有误，尽量两个方向的值都给到。

【强制】 font-family属性值使用英文名称。

解释：

• 西文字体在前，中文字体在后。
• 效果佳、质量高字体在前。
• 最后必须指定一个通用字体族 (serif /sans-serif)。

【强制】 font-weight属性值必须是数值。

解释：

css字重分100-900共九档，由于浏览器的兼容性，不同浏览器对 font-weight属性值相同的可能显示效果不同。但公认的情况是：值为400的时候相当于正常的字体；值为700的时候相当于粗体。