前端规范——CSS

CSS规范

1.命名规则

1. 所以的命名最好都小写。
2. 尽量使用英文命原则。
3. 尽量不缩写，除非一看就明白的单词，如：btn、nav。
4. 命名方式(BEM)：类-体（例：g-head）、类-体-修饰符（例：u-btn-active）。
5. scss中的变量、函数、混合、placeholder采用驼峰式命名。
6. 减少id命名，id在JS是唯一的，不能多次使用，id的优先级优先与class，所以id应该按需使用，而不能滥用。

2.样式命名

2.1 网页外层重要部分

● [建议]
warp------------用于最外层
header----------用于头部
main------------用于主体内容（中部）
main-left-------用于左侧布局
main-right------用于右侧布局
nav-------------网页菜单导航条
content---------网页中部主体
footer----------用于底部

2.2连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用“_”下划线来命名CSS选择器。

• 输入的时候少按一个shift键。
• 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）。
• 能良好区分JavaScript变量命名（JS变量命名是用“_”）。

3.代码规范

3.1 编码

● [建议] CSS文件使用UTF-8编码。

@charset "utf-8";
/* 下面为样式内容 */    

解释： UTF-8 编码具有更广泛的适应性。

3.2 使用CSS缩写属性

CSS有些属性可以缩写，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。

/* 
    CSS有些属性是可以缩写的，比如padding,margin,font等等，
    这样精简代码同时又能提高用户的阅读体验
 */

/* good */
.example {
  border-top:0;
  font:100%/1.6 serif;
  padding:0 1em 2em;
}

/* bad */
.example{
  border-top-style:none;
  font-family:serif;
  font-size:100%;
  line-height:1.6;
  padding-bottom:2em;
  padding-left:1em;
  padding-right:1em;
  padding-top:0;
}

3.3 样式属性顺序

1. 定位：position z-index left right top bottom clip等。
2. 自身属性：width height min-height max-height min-width max-width等。
3. 文字样式：color font-size letter-spacing, color text-align等。
4. 背景：background background-image background-color等。
5. 文本属性：background background-image background-color background-size等。
6. css3中属性：content、box-shadow、animation、border-radius、transform等。

/* good */ 
.example {                           
  z-index: -1;                       
  display: inline-block;             
  font-size: 16px;                    
  color: red;                           
  background-color: #eee;             
}                                   
/* bad */
.example {   
  color: red;
  background-color: #eee;
  display: inline-block;
  z-index: -1;
  font-size: 16px;
}
/* 目的：减少浏览器reflow(回流)，提升浏览器渲染dom的性能。*/

3.4 去掉小数点前的“0”

/* good */
.example{
  font-size:.8em;
}

/* bad */
.example{
  font-size:0.8em;
}

3.5 缩进

★ [强制] 不允许tab 缩进，使用2个空格或4个空格做为一个缩进层级，但同一项目中空格数应保持一致。

.selector {
  margin: 0;
  padding: 0;
}

3.6 空格

★ [强制] 选择器与 { 之间包含空格。

.selector {}

★ [强制] 属性名 与之后的 :之间不允许包含空格，: 与 属性值 之间必须包含空格。

.selector {
    margin: 0;
}

★ [强制] 列表型属性值书写在单行时，每个属性值,后必须跟一个空格。

.selector {
    font-family: Arial, sans-serif;
}

★ [强制] 选择器中， >、+、~ 选择器的两边各保留一个空格。

/* good */
main > nav {
  padding: 10px;
}
label + input {
  margin-left: 5px;
}
input:checked ~ button {
  background-color: #69C;
}
/* bad */
main>nav {
  padding: 10px;
}
label+input {
  margin-left: 5px;
}
input:checked~button {
  background-color: #69C;
}

3.7 属性

★ [强制]属性定义必须另起一行，若只有一行属性，可以不换行。

/* good */
.selector {
  margin: 0;
  padding: 0;
}
.selector2 { margin: 0; }
/* bad */
.selector { margin: 0; padding: 0; }

★ [强制] 属性定义后必须以分号结尾。

/* good */
.selector {
  margin: 0;
}
/* bad */
.selector {
  margin: 0
}

4.值和单位

4.1 文本

★ [强制] 文本内容必须用双引号包围。
解释： 文本类型的内容可能在选择器、属性值等内容中。 示例：

/* good */
html[lang|="zh"] .panel:before {
  font-family: "Microsoft YaHei", sans-serif;
  content: "“";
}
html[lang|="zh"] .panel:after {
  font-family: "Microsoft YaHei", sans-serif;
  content: "”";
}
/* bad */
html[lang|='zh'] .panel:before {
  font-family: 'Microsoft YaHei', sans-serif;
  content: '“';
}
html[lang|=zh] .panel:after {
  font-family: "Microsoft YaHei", sans-serif;
  content: "”";
}

4.2 长度

• [建议] 长度为 0 时须省略单位。

/* good */
body {
  padding: 0 5px;
}
/* bad */
body {
  padding: 0px 5px;
}

4.3颜色

★ [强制] 颜色值不允许使用命名色值。

/* good */
.success {
  color: #90ee90;
}
/* bad */
.success {
  color: lightgreen;
}

• [建议] 颜色值可以缩写时，尽量使用缩写形式。

/* good */
.success {
  background-color: #aca;
}
/* bad */
.success {
  background-color: #aaccaa;
}

• [建议] 颜色值中的英文字符采用小写。否则也应保证同一项目内保持大小写一致。

/* good */
.success {
  background-color: #aca;
  color: #90ee90;
}
/* good */
.success {
  background-color: #ACA;
  color: #90EE90;
}
/* bad */
.success {
  background-color: #ACA;
  color: #90ee90;
}

5.变换与动画

5.1 transition 指定 transition-property

★ [强制] 使用 transition 时应指定 transition-property。

/* good */
.box {
  transition: color 1s, border-color 1s;
}
/* bad */
.box {
  transition: all 1s;
}

5.2 translate 来代替 left 作为动画属性

解释：top/left是布局类的样式，这个样式的变化会导致重排。translate是一个绘制样式，这个样式的变化会导致重绘，不会进行CSS计算和布局。

/* good */
.box {
  transition: transform 1s;
}
.box:hover {
  transform: translate(20px); /* move right for 20px */
}
/* bad */
.box {
  left: 0;
  transition: left 1s;
}
.box:hover {
  left: 20px; /* move right for 20px */
}

6.响应式

[建议]Media Query 不得单独编排，必须与相关的规则一起定义。

[建议]尽可将媒体查询紧跟对应的规则。

解释： 尽量将媒体查询的位置靠近他们相关的规则，以便于查找和修改。不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部。这样做不利于修改维护。

/* good */

/* header styles */
@media (...) {
    /* header styles */
}
/* main styles */
@media (...) {
    /* main styles */
}
/* footer styles */
@media (...) {
    /* footer styles */
}

/* bad */

/* header styles */
/* main styles */
/* footer styles */
@media (...) {
    /* header styles */
    /* main styles */
    /* footer styles */
}

7.兼容性

7.1 前缀属性

★ [强制] 带私有前缀的属性由长到短排列，按冒号位置对齐。
解释： 标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。

/* good */
.box {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* bad */
.box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

7.2 Hack

• 1.需要添加 hack 时应尽可能考虑是否可以采用其他方式解决。
  解释：如果能通过合理的 HTML 结构或使用其他的 CSS 定义达到理想的样式，则不应该使用 hack 手段解决问题。通常 hack 会导致维护成本的增加。

• 2.尽量使用符合 CSS 语法的 selector hack，可以避免一些第三方库无法识别 hack 语法的问题。

/* IE 7 */
*:first-child + html #header {
  margin-top: 3px;
  padding: 5px;
}
/* IE 6 */
* html #header {
  margin-top: 5px;
  padding: 4px;
}

• 3. 尽量使用简单的属性 hack。

.box {
  _display: inline; /* fix double margin */
  float: left;
  margin-left: 20px;
}
.container {
  overflow: hidden;
  *zoom: 1; /* triggering hasLayout */
}

8.命名推荐表

8.1 功能

8.2 状态

8.3 注释的写法

/* Header */
    内容区
/* End Header */

8.4 id命名

• 页面结构

• 功能