• 垂直对齐
    • 1. grid-template-areas 属性值保持换行，并使用空格保持每列垂直对齐。
    • 2. grid、grid-template 属性值保持换行，并使用空格保持每列垂直对齐。
    • 3. 包含多个前缀的声明不强制对齐。
    • 4. 以逗号分隔的多属性值推荐放在多行，属性值开头保持一级缩进。

    垂直对齐

    1. grid-template-areas 属性值保持换行，并使用空格保持每列垂直对齐。

    例如：

    1. .foo {
    2.   grid-template-areas: "header header"
    3.                        "nav    main"
    4.                        "footer ....";
    6. }

    2. grid、grid-template 属性值保持换行，并使用空格保持每列垂直对齐。

    例如：

    1. .foo {
    2.   grid-template: [header-left] "header header" 30px [header-right]
    3.                  [main-left]   "nav    main"   1fr  [main-right]
    4.                  [footer-left] "nav    footer" 30px [footer-right]
    5.                  / 120px 1fr;
    6.   grid: "hd hd hd hd   hd   hd   hd   hd   hd"   minmax(100px, auto)
    7.         "sd sd sd main main main main main main" minmax(100px, auto)
    8.         "ft ft ft ft   ft   ft   ft   ft   ft"   minmax(100px, auto)
    9.         / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    10. }

    3. 包含多个前缀的声明不强制对齐。

    通常可以写作这样：

    1. .selector {
    2.   -webkit-transition: .3s ease;
    3.   -moz-transition: .3s ease;
    4.   -ms-transition: .3s ease;
    5.   -o-transition: .3s ease;
    6.   transition: .3s ease;
    7. }

    如果使用 CSS 预处理器或后处理器，推荐以冒号对齐，使代码更加美观。autoprefixer 中默认开启这种风格，请保证 cascade 参数为 true。

    1. .selector {
    2.   -webkit-transition: .3s ease;
    3.      -moz-transition: .3s ease;
    4.       -ms-transition: .3s ease;
    5.        -o-transition: .3s ease;
    6.           transition: .3s ease;
    7. }

    4. 以逗号分隔的多属性值推荐放在多行，属性值开头保持一级缩进。

    比如多个box-shadow、background、@font-face 中的 src 等，这有助于提高代码的可读性，且易于生成有效的 Diff。

    1. .selector {
    2.   box-shadow: 
    3.     1px 1px 5px #000,
    4.     0 0 6px blue,
    5.     2px 0 3px 5px #ccc inset;
    6.   background-image:
    7.     linear-gradient(to top right, green, blue),
    8.     linear-gradient(130deg, pink, lightblue),
    9.     linear-gradient(to right, blue, red);
    10.   background-size:
    11.     100px 20px,
    12.     30px, 100%;
    13.     cover;
    14. }
    16. @media
    17.   only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
    18.   only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
    19.   only screen and (-webkit-min-device-pixel-ratio: 2), /* WebKit */
    20.   only screen and (min-resolution: 192dpi), /* 不支持dppx的浏览器 */
    21.   only screen and (min-resolution: 2dppx) /* 标准 */
    22. {
    23.   .selector {
    25.   }
    26. }
    28. @font-face {
    29.   font-family: 'FontName'; /* IE9 */
    30.   src: url('FileName.eot');
    31.   src:
    32.     url('FileName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    33.     url('FileName.woff') format('woff'), /* Chrome,Firefox */
    34.     url('FileName.ttf') format('truetype'), /* Chrome,Firefox,Opera,Safari,Android, iOS 4.2+ */
    35.     url('FileName.svg#FontName') format('svg'); /* iOS 4.1- */
    36. }