通用约定

    代码组织

    • 以组件为单位组织代码段；
    • 制定一致的注释规范；
    • 组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
    • 如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动；

    提示：通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

    Class 和 ID

    • 使用语义化、通用的命名方式；
    • 使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线；
    • 避免选择器嵌套层级过多，尽量少于 3 级；
    • 避免选择器和 Class、ID 叠加使用；

    出于性能考量，在没有必要的情况下避免元素选择器叠加 Class、ID 使用。

    元素选择器和 ID、Class 混合使用也违反关注分离原则。如果HTML标签修改了，就要再去修改 CSS 代码，不利于后期维护。

    1. /* Not recommended */
    2. .red {}
    3. .box_green {}
    4. .page .header .login #username input {}
    5. ul#example {}
    7. /* Recommended */
    8. #nav {}
    9. .box-video {}
    10. #username input {}
    11. #example {}

    声明块格式

    • 声明块的左括号 { 前添加一个空格；
    • 声明块的右括号 } 应单独成行；
    • 声明语句中的 : 后应添加一个空格；
    • 声明语句应以分号 ; 结尾；
    • 一般以逗号分隔的属性值，每个逗号后应添加一个空格；
    • rgb()、rgba()、hsl()、hsla() 或 rect() 括号内的值，逗号分隔，但逗号后不添加一个空格；
    • 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5； 代替 -0.5px）；
    • 十六进制值应该全部小写和尽量简写，例如，#fff 代替 #ffffff；
    • 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;；

    声明顺序

    相关属性应为一组，推荐的样式编写顺序

    1. Positioning
    2. Box model
    3. Typographic
    4. Visual

    其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

    1. .declaration-order {
    2.   /* Positioning */
    3.   position: absolute;
    4.   top: 0;
    5.   right: 0;
    6.   bottom: 0;
    7.   left: 0;
    8.   z-index: 100;
    10.   /* Box model */
    11.   display: block;
    12.   box-sizing: border-box;
    13.   width: 100px;
    14.   height: 100px;
    15.   padding: 10px;
    16.   border-radius: 3px;
    17.   margin: 10px;
    18.   float: right;
    19.   overflow: hidden;
    21.   /* Typographic */
    22.   font: normal 13px "Helvetica Neue", sans-serif;
    23.   line-height: 1.5;
    24.   text-align: center;
    26.   /* Visual */
    27.   background-color: #f5f5f5;
    28.   color: #fff;
    29.   opacity: .8;
    31.   /* Other */
    32.   cursor: pointer;
    33. }

    引号使用

    url() 、属性选择符、属性值使用双引号。参考 Is quoting the value of url() really necessary?

    媒体查询（Media query）的位置

    将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。

    1. .element { ... }
    2. .element-avatar { ... }
    3. .element-selected { ... }
    5. @media (max-width: 768px) {
    6.   .element { ...}
    7.   .element-avatar { ... }
    8.   .element-selected { ... }
    9. }

    不要使用 @import

    与 <link> 相比， 要慢很多，不光增加额外的请求数，还会导致不可预料的问题。

    • 使用多个 元素；
    • 其他 CSS 文件合并工具；

    参考 ；

    链接的样式顺序：

    a:link -> a:visited -> a:hover -> a:active（LoVeHAte）

    无需添加浏览器厂商前缀

    使用 Autoprefixer 自动添加浏览器厂商前缀，编写 CSS 时不需要添加浏览器前缀，直接使用标准的 CSS 编写。

    Autoprefixer 通过 ，按兼容的要求，对相应的 CSS 代码添加浏览器厂商前缀。