垂直对齐

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