• 基本格式
    • 1. CSS文件头部声明 @charset
    • 2. 统一使用小写。
    • 3. 保持空格
    • 4. 每个声明前保留一级缩进
    • 5. 右大括号保持与该规则集第一个字符对齐
    • 6. 多个选择器和声明都独占一行
    • 7. 每个规则集之间保留一个空行
    • 8. 统一使用双引号""
    • 9. 每增加一级花括号嵌套，则增加一级缩进

    基本格式

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