基本格式

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