CSS

---

• 用2个空格来缩进.
• 使用-而不是小驼峰命名。如果你使用 BEM，也可以使用下划线（参见下面的 OOCSS 和 BEM）
• 不要使用id选择器
• 如果使用多个选择器，每个选择器单独占一行
• 在{前面保留一个空格
• 在属性：后面保留一个空格
• 结束}应该单独占一行
• 两个规则之间应该保留一个空行

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 {
  // ...
}

注释

• 块注释使用//
• 注释应当单独一行，而不是在代码的结尾
• 对于一些不容易理解的，或者是冗余的兼容写法，或者z-index之类的请一定要注释
  • 为什么用到z-index
  • 兼容性处理或者针对特定浏览器的hack

边框

使用0 而不是none(浏览器兼容问题)
Bad

.foo {
  border: none;
}

Good

.foo {
  border: 0;
}

Sass

---

语法

• 使用.scss语法，而不是.sass语法 之间异同
• css属性排序，如有@include将其放在排序的后面，如有内嵌放在最后

.btn-green {
  background: green;
  font-weight: bold;
  // ...
}

.btn-green {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);
  // ...
}

.btn {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);

  .icon {
    margin-right: 10px;
  }
}

Variables

使用-来定义变量（比如_my-variable）

Minxins

为了让代码遵循 DRY 原则（Don't Repeat Yourself）、增强清晰性或抽象化复杂性，应该使用 mixin，这与那些命名良好的函数的作用是异曲同工的。虽然 mixin 可以不接收参数，但要注意，假如你不压缩负载（比如通过 gzip），这样会导致最终的样式包含不必要的代码重复。

@extend

因为它不直观，而且具有潜在风险。应避免使用@extend

嵌套选择器

不要让嵌套选择器操作三层～