垂直对齐

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