基本格式

1. CSS文件头部声明 @charset

为了避免 HTML 和 CSS 文件编码不同时造成中文解析乱码，造成的不必要的麻烦，CSS 文件头部统一加上文件对应的编码，例如文件编码为 UTF-8 时：

  1. @charset "UTF-8";
  2. /* 开始书写样式 */

需要注意的是：

  • @charset 前面不能有任何字符。
  • @charset 必须出现在 CSS 文件的最开始。

注：在使用 SASS 时如果不指定 @charset 也可能造成乱码。

2. 统一使用小写。

  • 字体名称以及特殊的 CSS 属性/值（translateX等）不要求强制小写
  • 颜色值如果是16进制，推荐小写，更加容易辨识。
  • 如果是关键字色值，推荐使用更加直观的颜色关键字。

不推荐的写法：

  1. .Foo{
  2.   BACKGROUND: #CCC;
  3.   color: currentColor;
  4.   border-color: #F00; /* 红色 */
  5.   transform: translateX(20px);
  6. }

推荐的写法：

  1. .foo{
  2.   background: #ccc;
  3.   color: currentColor;
  4.   border-color: red;
  5.   transform: translateX(20px);
  6. }

3. 保持空格

留白是一种艺术，合理的留白（空格）可以更好的阅读代码

  • 规则集的左大括号前保留一个空格

  • 属性值前增加个空格(使用 Emmet 会自动生成这个空格)

    1. .selector {
    2.   width: 200px;
    3.   font-size: 22px;
    4. }

  • 逗号后面保留一个空格。

    1. .foo {
    2.   color: rgba(0, 0, 0, .5);
    3.   transition: color .3s, width .5s cubic-bezier(.6, 0, .2, 1);
    4.   transform: matrix(0, 1, 1, 1, 10, 10);
    5. }
    7. @keyframes flash {
    8.   0%, 50%, 100% {
    9.     opacity: 1;
    10.   }
    12.   25%, 75% {
    13.     opacity: 0;
    14.   }
    15. }

  • 属性值中的 / 分隔符前后保留一个空格。

    1. .foo {
    2.   font: 12px / 1.5 sans-serif;
    3.   background: center / cover;
    4.   grid-area: 1 / 1 / 4 / 2;
    5.   grid-column: 2 / 3;
    6.   grid-template: 100px 1fr / 50px fit-content(100px);
    7. }

  • calc() 函数中的 +, -, *, / 运算符前后保留一个空格。

    错误的语法

    1. .foo {
    2.   width: calc(100%/3-2*1em+2*1px)
    3.   margin: calc(1rem -2px) calc(1rem- 1px);
    4. }

    正确的语法

    1. .foo {
    2.   width: calc(100%/3 - 2*1em + 2*1px)
    3.   margin: calc(1rem - 2px) calc(1rem - 1px);
    4. }

    注意：*, / 虽然不用加前后空格，但是为了统一，建议都加空格。

    推荐的写法：

    1. .foo {
    2.   width: calc(100% / 3 - 2 * 1em + 2 * 1px)
    3.   margin: calc(1rem - 2px) calc(1rem - 1px);
    4. }

  • Media Queries 中的 >, <, >=, <= 标识符前后保持一个空格。

    1. @media (width >= 500px) and (width <= 1200px) {
    3. }
    5. @custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);

  • 其他未来 CSS 新增的语法以此类推，保留合适的空格。

4. 每个声明前保留一级缩进

不推荐的写法：

  1. h3 {
  2. font-weight: bold;
  3. }

推荐的写法：

  1. h3 {
  2.   font-weight: bold;
  3. }

5. 右大括号保持与该规则集第一个字符对齐

不推荐的写法：

  1. h3{
  2.   font-weight: bold;
  3.   }

推荐的写法：

  1. h3 {
  2.   font-weight: bold;
  3. }

6. 多个选择器和声明都独占一行

不推荐的写法：

  1. h1, h2, h3 {
  2.   font-weight: normal; line-height: 1.5;
  3. }

推荐的写法：

  1. h1,
  2. h2,
  3. h3 {
  4.   font-weight: normal;
  5.   line-height: 1.5;
  6. }

7. 每个规则集之间保留一个空行

不推荐的写法：

  1. .selector1 {
  2.   display: block;
  3.   width: 100px;
  4. }
  5. .selector2 {
  6.   padding: 10px;
  7.   margin: 10px auto;
  8. }

推荐的写法：

  1. .selector1 {
  2.   display: block;
  3.   width: 100px;
  4. }
  6. .selector2 {
  7.   padding: 10px;
  8.   margin: 10px auto;
  9. }

8. 统一使用双引号""

不推荐的写法：

  1. .foo:before {
  2.   content: '';
  3. }
  5. input[type='checkbox'] {
  6.   position: absolute;
  7. }

推荐的写法：

  1. .foo:before {
  2.   content: "";
  3. }
  5. input[type="checkbox"] {
  6.   position: absolute;
  7. }

9. 每增加一级花括号嵌套，则增加一级缩进

例如：

  1. @supports (animation: 1s foo both) {
  2.   @keyframes foo {
  3.     50% {
  4.       transform: scale(1.2);
  5.     }
  7.     80% {
  8.       transform: scale(0);
  9.     }
  10.   }
  11. }