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的时候相当于粗体。