# 一. CSS ## 1.格式 * 使用 2 个空格作为缩进。 * 类名建议使用破折号代替驼峰法。如果你使用 BEM，也可以使用下划线。 * 不要使用 ID 选择器。 * 在一个规则声明中应用了多个选择器时，每个选择器独占一行。 * 在规则声明的左大括号 {前加上一个空格。 * 在属性的冒号:后面加上一个空格，前面不加空格。 * 规则声明的右大括号 }独占一行。 * 规则声明之间用空行分隔开。 ~~~css //Bad .avatar{ border-radius:50%; border:2px solid white; } .no, .nope, .not_good { // ... } #lol-no { // ... } //Good .avatar { border-radius: 50%; border: 2px solid white; } .one, .selector, .per-line { // ... } ~~~ ## 2. 注释 * 建议使用行注释 (在 Sass 中是 //) 代替块注释。 * 建议注释独占一行。避免行末注释。 * 给没有自注释的代码写上详细说明，比如： * 为什么用到了 z-index * 兼容性处理或者针对特定浏览器的 hack ## 3. ID 选择器 * 在 CSS 中，虽然可以通过 ID 选择元素，但大家通常都会把这种方式列为反面教材。 * ID 选择器给你的规则声明带来了不必要的高 优先级，而且 ID 选择器是不可重用的。 ## 4. JavaScript 钩子 * 避免在 CSS 和 JavaScript 中绑定相同的类。 * 否则开发者在重构时通常会出现以下情况：轻则浪费时间在对照查找每个要改变的类，重则因为害怕破坏功能而不敢作出更改。 * 我们推荐在创建用于特定 JavaScript 的类名时，添加 .js-前缀： ~~~html <button class="btn btn-primary js-request-to-book">Request to Book</button> ~~~ ## 5. 边框 在定义无边框样式时，使用 0代替 none。 ~~~css //Bad .foo { border: none; } //Good .foo { border: 0; } ~~~ # 二.Sass ## 6.语法 使用 .scss的语法，不使用 .sass原本的语法。 ## 7. 属性声明 首先列出除去 @include和嵌套选择器之外的所有属性声明。 ~~~css .btn-green { background: green; font-weight: bold; // ... } ~~~ ## 8. @include声明 紧随后面的是 @include，这样可以使得整个选择器的可读性更高。 ~~~css .btn-green { background: green; font-weight: bold; @include transition(background 0.5s ease); // ... } ~~~ ## 9. 嵌套选择器 如果有必要_用到嵌套选择器，把它们放到最后，在规则声明和嵌套选择器之间要加上空白，相邻嵌套选择器之间也要加上空白。嵌套选择器中的内容也要遵循上述指引。 ~~~css .btn { background: green; font-weight: bold; @include transition(background 0.5s ease); .icon { margin-right: 10px; } } ~~~ ## 10. 变量 变量名应使用破折号（例如 $my-variable）代替 camelCased 和 snake_cased 风格。 对于仅用在当前文件的变量，可以在变量名之前添加下划线前缀（例如 $_my-variable）。 ## 11. Mixins 为了让代码遵循 DRY 原则（Don’t Repeat Yourself）、增强清晰性或抽象化复杂性，应该使用 mixin，这与那些命名良好的函数的作用是异曲同工的。 ## 12. 扩展指令 应避免使用 @extend指令，因为它并不直观，而且具有潜在风险，特别是用在嵌套选择器的时候。 即便是在顶层占位符选择器使用扩展，如果选择器的顺序最终会改变，也可能会导致问题。（比如，如果它们存在于其他文件，而加载顺序发生了变化）。 其实，使用 @extend 所获得的大部分优化效果，gzip 压缩已经帮助你做到了，因此你只需要通过 mixin 让样式表更符合 DRY 原则就足够了。