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

    垂直对齐

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

    例如:

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

    2. gridgrid-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-shadowbackground、@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. }
    15. @media
    16. only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
    17. only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
    18. only screen and (-webkit-min-device-pixel-ratio: 2), /* WebKit */
    19. only screen and (min-resolution: 192dpi), /* 不支持dppx的浏览器 */
    20. only screen and (min-resolution: 2dppx) /* 标准 */
    21. {
    22. .selector {
    23. }
    24. }
    25. @font-face {
    26. font-family: 'FontName'; /* IE9 */
    27. src: url('FileName.eot');
    28. src:
    29. url('FileName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    30. url('FileName.woff') format('woff'), /* Chrome,Firefox */
    31. url('FileName.ttf') format('truetype'), /* Chrome,Firefox,Opera,Safari,Android, iOS 4.2+ */
    32. url('FileName.svg#FontName') format('svg'); /* iOS 4.1- */
    33. }