20170620

CSS编码规范只看了有2/3就发现自己在写代码的过程中有很多的规范问题，先就自己的错误对应的知识点罗列如下。

自己写的代码中需改正的规范：

• 要使用4个空格做为一个缩进层级，不允许使用2个空格或tab字符。一直都是用tab缩进的，以后要改正。
• 选择器与{之间必须包含空格。表示自己一直都没有写空格。
• 当一个rule包含多个selector时，每个选择器声明必须独占一行。如下例子是规范的写法：

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

• [建议]选择器的嵌套层级应不大于3级。

• [建议]同一rule set下的属性在书写时，应按功能进行分组，并以FormattingModel（布局方式、位置）>BoxModel（尺寸）>Typographic（文本相关）>Visual（视觉效果）的顺序书写，以提高代码的可读性。解释：

  • Formatting Model相关属性包括：position /top / right / bottom / left / float / display / overflow 等
  • Box Model相关属性包括：border /margin / padding / width / height 等
  • Typographic相关属性包括：font /line-height / text-align / word-wrap 等
  • Visual相关属性包括：background/ color / transition / list-style 等
  • 另外，如果包含content属性，应放在最前面。

• 当数值为 0 - 1 之间的小数时，省略整数部分的0，比如0.2写成 .2。

• 长度为0时须省略单位。(也只有长度单位可省)
• 颜色值可以缩写时，必须使用缩写形式，比如白色写成#fff而不是#ffffff。[建议]颜色值中的英文字符采用小写，如不用小写也需要保证同一项目内保持大小写一致。
• 颜色值不允许使用命名色值。比如：color: grey是不可以的。

---

自己需注意的规范：

• 列表型属性值书写在单行时，逗号后必须跟一个空格。比如设置字体时：

font-family: Arial, sans-serif;

这样是规范的写法。

• 每行不得超过120个字符，除非单行不可分割。常见不可分割的场景为URL超长。给出的建议是对于超长的样式，在样式值的空格处或逗号后换行，按逻辑分组。
• >、+、~选择器的前后两侧各保留一个空格。
• 属性选择器中的值必须而且是只能用双引号包围，其他都是不可以的。
• 如无必要，不得为id、class选择器添加类型选择器进行限定。如下举出规范和不规范的例子：

/* good */
#error,
.danger-message {
    font-color: #c00;
}

/* bad */
dialog#error,
p.danger-message {
    font-color: #c00;
}

• 文本内容必须用双引号包围。举例：

/* good */
html[lang|="zh"] q:before {
    font-family: "Microsoft YaHei", sans-serif;
    content: "“";
}

html[lang|="zh"] q:after {
    font-family: "Microsoft YaHei", sans-serif;    
    content: "”";
}

/* bad */
html[lang|=zh] q:before {
    font-family: 'Microsoft YaHei', sans-serif;
    content: '“';
}

html[lang|=zh] q:after {
    font-family: "Microsoft YaHei", sans-serif;
    content: "”";
}

• url( )函数中的路径不加引号，以前都没注意，就直接写了，有时加有时不加，现在就要注意了。[建议]url( )函数中的绝对路径可省去协议名，如url(//baidu.com/img/bg.png)。

---

心得体会：

今天跟小伙伴们深刻讨论了代码，发现了自己很多问题，需要对代码进行重新修改。
1.轮播图那儿应该用img标签将图写进代码中，而不是background。
2.感觉最底下那一块中的select按钮不应该像自己那样写成了背景，而是直接写一个img标签然后进行定位。
3.还有很多代码优化方面的细节问题需要修改，细节问题还是很多的。

---

参考规范：https://github.com/ecomfe/spec/blob/master/css-style-guide.md