CSS 代码风格

基本设置

  • 2 空格缩进
  • UTF-8 编码

空白与格式

  • 大括号与选择器之间留空，冒号后面留空，注释内外前后留空。

    理由：据说这样比较漂亮。
    1. /* 我是注释 */
    2. div { /* 我是注释 */ }
    3. span {
    4. color: red; /* 我是注释 */
    5. }
  • 在只有一条样式时允许和选择器写到同一行，不强制。

    理由：写三行太占屏幕空间。
  • 一个选择器中有多个样式声明时每条写一行。

    理由：使报错可以精确到具体的规则上，便于排错。
  • 多个选择器使用逗号隔开时写在不同的行，大括号不要另起一行。

    理由：修改时不容易漏掉逗号后面的选择器。
    1. div,
    2. span {
    3. color: red;
    4. font-size: 12px;
    5. }
  • 每条样式声明后面都加上那个分号。

    理由：复制起来方便。
  • 所有最外层引号使用双引号。

    理由：与 HTML 保持一致。
  • 用逗号分隔的多个样式值写成多行。

    理由：便于阅读与编辑。
    1. .block {
    2. box-shadow: 0 0 0 rgba(#000, 0.1),
    3.             1px 1px 0 rgba(#000, 0.2),
    4.             2px 2px 0 rgba(#000, 0.3),
    5.             3px 3px 0 rgba(#000, 0.4),
    6.             4px 4px 0 rgba(#000, 0.5);
    7. }

功能限定

  • 避免使用 ID 选择器。

    理由：权重太高，不易维护。
  • 禁止使用 @import 引入 CSS 文件。
    理由：各种坑不解释。

命名与模块化

  • 0 值的单位建议省略，但不强制。

    理由：大部分 0 值的单位是没用的。
  • 16 进制颜色值中的字母统一小写。

    理由：切换大小写麻烦。
  • 类名中的字母一律小写。

    理由：它不区分大小写，难道有人想统一大写？
  • 类名中只使用字母、数字以及“-”。

    理由：要是没有限制的话我怕一些猴子使用阿拉伯文。
    1. .hello {} /* OK */
    2. .module-title {} /* OK */
    3. .panel-level1 {} /* OK */
    4. .导航栏 /* Fuck */