目录

  1. 缩进
  2. 分号
  3. 空格
  4. 空行
  5. 换行
  6. 注释
  7. 引号
  8. 命名
  9. 属性声明顺序
  10. 颜色
  11. 属性简写
  12. 媒体查询
  13. 杂项

缩进

  • 使用 soft tab(4个空格)。

    .element {
        position: absolute;
        top: 10px;
        left: 10px;
        
        border-radius: 10px;
        width: 50px;
        height: 50px;
    }
    

    [↑]

分号

  • 每个属性声明末尾都要加分号。

    .element {
        width: 20px;
        height: 20px;
        
        background-color: red;
    }
    

    [↑]

空格

  • 以下几种情况不需要空格:
    • 属性名后
    • 多个规则的分隔符,
    • !important !
    • 属性值中(后和)
    • 行末不要有多余的空格
  • 以下几种情况需要空格:
    • 属性值前
    • 选择器>, +, ~前后
    • {
    • !important !
    • @else 前后
    • 属性值中的,
    • 注释/*后和*/
    /* not good */
    .element {
        color :red! important;
        background-color: rgba(0,0,0,.5);
    }
        
    /* good */
    .element {
        color: red !important;
        background-color: rgba(0, 0, 0, .5);
    }
        
    /* not good */
    .element ,
    .dialog{
        ...
    }
        
    /* good */
    .element,
    .dialog {
        
    }
        
    /* not good */
    .element>.dialog{
        ...
    }
        
    /* good */
    .element > .dialog{
        ...
    }
        
    /* not good */
    .element{
        ...
    }
        
    /* good */
    .element {
        ...
    }
        
    /* not good */
    @if{
        ...
    }@else{
        ...
    }
        
    /* good */
    @if {
        ...
    } @else {
        ...
    }
    

    [↑]

空行

  • 以下几种情况需要空行:
    • 文件最后保留一个空行
    • }后最好跟一个空行,包括scss中嵌套的规则
    • 属性之间需要适当的空行,具体见属性声明顺序
    /* not good */
    .element {
        ...
    }
    .dialog {
        color: red;
        &:after {
            ...
        }
    }
        
    /* good */
    .element {
        ...
    }
        
    .dialog {
        color: red;
        
        &:after {
            ...
        }
    }
    

    [↑]

换行

  • 以下几种情况不需要换行:
    • {
  • 以下几种情况需要换行:
    • {后和}
    • 每个属性独占一行
    • 多个规则的分隔符,
    /* not good */
    .element
    {color: red; background-color: black;}
        
    /* good */
    .element {
        color: red;
        background-color: black;
    }
        
    /* not good */
    .element, .dialog {
        ...
    }
        
    /* good */
    .element,
    .dialog {
        ...
    }
    

    [↑]

注释

  • 注释统一用/* */(scss中也不要用//),具体参照例子的写法;
  • 缩进与下一行代码保持一致;
  • 可位于一个代码行的末尾,与代码间隔一个空格。

      	/* Modal header */
    .modal-header {
        ...
    }
        
    /*
     * Modal header
     */
    .modal-header {
        ...
    }
        
    .modal-header {
        /* 50px */
        width: 50px;
        
        color: red; /* color red */
    }
    

    [↑]

引号

  • 最外层统一使用双引号;
  • url的内容要用引号;
  • 属性选择器中的属性值需要引号。

    .element:after {
        content: "";
        background-image: url("logo.png");
    }
        
    li[data-type="single"] {
        ...
    }
    

    [↑]

命名

  • 类名使用小写字母,以中划线分隔
  • id采用驼峰式命名
  • scss中的变量、函数、混合、placeholder采用驼峰式命名

    /* class */
    .element-content {
        ...
    }
        
    /* id */
    #myDialog {
        ...
    }
        
    /* 变量 */
    $colorBlack: #000;
        
    /* 函数 */
    @function pxToRem($px) {
        ...
    }
        
    /* 混合 */
    @mixin centerBlock {
        ...
    }
        
    /* placeholder */
    %myDialog {
        ...
    }
    

    [↑]

属性声明顺序

  • 相关的属性声明按例子的顺序做分组处理,组之间需要有一个空行。

    .declaration-order {
        display: block;
        float: right;
        
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 100;
        
        border: 1px solid #e5e5e5;
        border-radius: 3px;
        width: 100px;
        height: 100px;
        
        font: normal 13px "Helvetica Neue", sans-serif;
        line-height: 1.5;
        text-align: center;
        
        color: #333;
        background-color: #f5f5f5;
        
        opacity: 1;
    }
    // 下面是推荐的属性的顺序
    [
        [
            "display",
            "visibility",
            "float",
            "clear",
            "overflow",
            "overflow-x",
            "overflow-y",
            "clip",
            "zoom"
        ],
        [
            "table-layout",
            "empty-cells",
            "caption-side",
            "border-spacing",
            "border-collapse",
            "list-style",
            "list-style-position",
            "list-style-type",
            "list-style-image"
        ],
        [
            "-webkit-box-orient",
            "-webkit-box-direction",
            "-webkit-box-decoration-break",
            "-webkit-box-pack",
            "-webkit-box-align",
            "-webkit-box-flex"
        ],
        [
            "position",
            "top",
            "right",
            "bottom",
            "left",
            "z-index"
        ],
        [
            "margin",
            "margin-top",
            "margin-right",
            "margin-bottom",
            "margin-left",
            "-webkit-box-sizing",
            "-moz-box-sizing",
            "box-sizing",
            "border",
            "border-width",
            "border-style",
            "border-color",
            "border-top",
            "border-top-width",
            "border-top-style",
            "border-top-color",
            "border-right",
            "border-right-width",
            "border-right-style",
            "border-right-color",
            "border-bottom",
            "border-bottom-width",
            "border-bottom-style",
            "border-bottom-color",
            "border-left",
            "border-left-width",
            "border-left-style",
            "border-left-color",
            "-webkit-border-radius",
            "-moz-border-radius",
            "border-radius",
            "-webkit-border-top-left-radius",
            "-moz-border-radius-topleft",
            "border-top-left-radius",
            "-webkit-border-top-right-radius",
            "-moz-border-radius-topright",
            "border-top-right-radius",
            "-webkit-border-bottom-right-radius",
            "-moz-border-radius-bottomright",
            "border-bottom-right-radius",
            "-webkit-border-bottom-left-radius",
            "-moz-border-radius-bottomleft",
            "border-bottom-left-radius",
            "-webkit-border-image",
            "-moz-border-image",
            "-o-border-image",
            "border-image",
            "-webkit-border-image-source",
            "-moz-border-image-source",
            "-o-border-image-source",
            "border-image-source",
            "-webkit-border-image-slice",
            "-moz-border-image-slice",
            "-o-border-image-slice",
            "border-image-slice",
            "-webkit-border-image-width",
            "-moz-border-image-width",
            "-o-border-image-width",
            "border-image-width",
            "-webkit-border-image-outset",
            "-moz-border-image-outset",
            "-o-border-image-outset",
            "border-image-outset",
            "-webkit-border-image-repeat",
            "-moz-border-image-repeat",
            "-o-border-image-repeat",
            "border-image-repeat",
            "padding",
            "padding-top",
            "padding-right",
            "padding-bottom",
            "padding-left",
            "width",
            "min-width",
            "max-width",
            "height",
            "min-height",
            "max-height"
        ],
        [
            "font",
            "font-family",
            "font-size",
            "font-weight",
            "font-style",
            "font-variant",
            "font-size-adjust",
            "font-stretch",
            "font-effect",
            "font-emphasize",
            "font-emphasize-position",
            "font-emphasize-style",
            "font-smooth",
            "line-height",
            "text-align",
            "-webkit-text-align-last",
            "-moz-text-align-last",
            "-ms-text-align-last",
            "text-align-last",
            "vertical-align",
            "white-space",
            "text-decoration",
            "text-emphasis",
            "text-emphasis-color",
            "text-emphasis-style",
            "text-emphasis-position",
            "text-indent",
            "-ms-text-justify",
            "text-justify",
            "letter-spacing",
            "word-spacing",
            "-ms-writing-mode",
            "text-outline",
            "text-transform",
            "text-wrap",
            "-ms-text-overflow",
            "text-overflow",
            "text-overflow-ellipsis",
            "text-overflow-mode",
            "-ms-word-wrap",
            "word-wrap",
            "-ms-word-break",
            "word-break"
        ],
        [
            "color",
            "background",
            "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
            "background-color",
            "background-image",
            "background-repeat",
            "background-attachment",
            "background-position",
            "-ms-background-position-x",
            "background-position-x",
            "-ms-background-position-y",
            "background-position-y",
            "-webkit-background-clip",
            "-moz-background-clip",
            "background-clip",
            "background-origin",
            "-webkit-background-size",
            "-moz-background-size",
            "-o-background-size",
            "background-size"
        ],
        [
            "outline",
            "outline-width",
            "outline-style",
            "outline-color",
            "outline-offset",
            "opacity",
            "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
            "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
            "-ms-interpolation-mode",
            "-webkit-box-shadow",
            "-moz-box-shadow",
            "box-shadow",
            "filter:progid:DXImageTransform.Microsoft.gradient",
            "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
            "text-shadow"
        ],
        [
            "-webkit-transition",
            "-moz-transition",
            "-ms-transition",
            "-o-transition",
            "transition",
            "-webkit-transition-delay",
            "-moz-transition-delay",
            "-ms-transition-delay",
            "-o-transition-delay",
            "transition-delay",
            "-webkit-transition-timing-function",
            "-moz-transition-timing-function",
            "-ms-transition-timing-function",
            "-o-transition-timing-function",
            "transition-timing-function",
            "-webkit-transition-duration",
            "-moz-transition-duration",
            "-ms-transition-duration",
            "-o-transition-duration",
            "transition-duration",
            "-webkit-transition-property",
            "-moz-transition-property",
            "-ms-transition-property",
            "-o-transition-property",
            "transition-property",
            "-webkit-transform",
            "-moz-transform",
            "-ms-transform",
            "-o-transform",
            "transform",
            "-webkit-transform-origin",
            "-moz-transform-origin",
            "-ms-transform-origin",
            "-o-transform-origin",
            "transform-origin",
            "-webkit-animation",
            "-moz-animation",
            "-ms-animation",
            "-o-animation",
            "animation",
            "-webkit-animation-name",
            "-moz-animation-name",
            "-ms-animation-name",
            "-o-animation-name",
            "animation-name",
            "-webkit-animation-duration",
            "-moz-animation-duration",
            "-ms-animation-duration",
            "-o-animation-duration",
            "animation-duration",
            "-webkit-animation-play-state",
            "-moz-animation-play-state",
            "-ms-animation-play-state",
            "-o-animation-play-state",
            "animation-play-state",
            "-webkit-animation-timing-function",
            "-moz-animation-timing-function",
            "-ms-animation-timing-function",
            "-o-animation-timing-function",
            "animation-timing-function",
            "-webkit-animation-delay",
            "-moz-animation-delay",
            "-ms-animation-delay",
            "-o-animation-delay",
            "animation-delay",
            "-webkit-animation-iteration-count",
            "-moz-animation-iteration-count",
            "-ms-animation-iteration-count",
            "-o-animation-iteration-count",
            "animation-iteration-count",
            "-webkit-animation-direction",
            "-moz-animation-direction",
            "-ms-animation-direction",
            "-o-animation-direction",
            "animation-direction"
        ],
        [
            "content",
            "quotes",
            "counter-reset",
            "counter-increment",
            "resize",
            "cursor",
            "-webkit-user-select",
            "-moz-user-select",
            "-ms-user-select",
            "user-select",
            "nav-index",
            "nav-up",
            "nav-right",
            "nav-down",
            "nav-left",
            "-moz-tab-size",
            "-o-tab-size",
            "tab-size",
            "-webkit-hyphens",
            "-moz-hyphens",
            "hyphens",
            "pointer-events"
        ]
    ]
    

    [↑]

颜色

  • 使颜色16进制用小写字母;
  • 颜色16进制尽量用简写。

    /* not good */
    .element {
        color: #ABCDEF;
        background-color: #001122;
    }
        
    /* good */
    .element {
        color: #abcdef;
        background-color: #012;
    }
    

    [↑]

属性简写

  • 属性简写需要你非常清楚属性值的正确顺序,而且在大多数情况下并不需要设置属性简写中包含的所有值,所以建议尽量分开声明会更加清晰;
  • marginpadding 相反,需要使用简写;
  • 常见的属性简写包括:
    • font
    • background
    • transition
    • animation
    /* not good */
    .element {
        transition: opacity 1s linear 2s;
    }
        
    /* good */
    .element {
        transition-delay: 2s;
        transition-timing-function: linear;
        transition-duration: 1s;
        transition-property: opacity;
    }
    

    [↑]

媒体查询

  • 尽量将媒体查询的规则靠近与他们相关的规则,不要将他们一起放到一个独立的样式文件中,或者丢在文档的最底部,这样做只会让大家以后更容易忘记他们。

    .element {
        ...
    }
        
    .element-avatar{
        ...
    }
        
    @media (min-width: 480px) {
        .element {
            ...
        }
        
        .element-avatar {
            ...
        }
    }
    

    [↑]

杂项

  • 不允许有空的规则;
  • 元素选择器用小写字母;
  • 去掉小数点前面的0;
  • 去掉数字中不必要的小数点和末尾的0;
  • 属性值0后面不要加单位;
  • 同个属性不同前缀的写法需要在垂直方向保持对齐,具体参照右边的写法;
  • 无前缀的标准属性应该写在有前缀的属性后面;
  • 不要在同个规则里出现重复的属性,如果重复的属性是连续的则没关系;
  • 不要在一个文件里出现两个相同的规则;
  • border: 0; 代替 border: none;
  • 选择器不要超过4层(在scss中如果超过4层应该考虑用嵌套的方式来写);
  • 尽量少用*选择器。

    /* not good */
    .element {
    }
        
    /* not good */
    LI {
        ...
    }
        
    /* good */
    li {
        ...
    }
        
    /* not good */
    .element {
        color: rgba(0, 0, 0, 0.5);
    }
        
    /* good */
    .element {
        color: rgba(0, 0, 0, .5);
    }
        
    /* not good */
    .element {
        width: 50.0px;
    }
        
    /* good */
    .element {
        width: 50px;
    }
        
    /* not good */
    .element {
        width: 0px;
    }
        
    /* good */
    .element {
        width: 0;
    }
        
    /* not good */
    .element {
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        
        background: linear-gradient(to bottom, #fff 0, #eee 100%);
        background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
        background: -moz-linear-gradient(top, #fff 0, #eee 100%);
    }
        
    /* good */
    .element {
        -webkit-border-radius: 3px;
           -moz-border-radius: 3px;
                border-radius: 3px;
        
        background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
        background:    -moz-linear-gradient(top, #fff 0, #eee 100%);
        background:         linear-gradient(to bottom, #fff 0, #eee 100%);
    }
        
    /* not good */
    .element {
        color: rgb(0, 0, 0);
        width: 50px;
        color: rgba(0, 0, 0, .5);
    }
        
    /* good */
    .element {
        color: rgb(0, 0, 0);
        color: rgba(0, 0, 0, .5);
    }
    
  • 不要使用有 @import;与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。替代办法有以下几种:
    <!-- Use link elements -->
    <link rel="stylesheet" href="core.css">
        
    <!-- Avoid @imports -->
    <style>
      @import url("more.css");
    </style>
    

    [↑]

======================================================

参考