前端工程程式碼規範（三）——CSS, SCSS

micherwa發表於2018-05-26
前端CSS

縮排與分號

  • 使用soft tab（4個空格）。
  • 每個屬性宣告末尾都要加分號。
.element {
    width: 20px;
    height: 20px;

    background-color: red;
}

空格

1.不需要空格的情況：

  • 屬性名後
  • 多個規則的分隔符','前
  • !important '!'後
  • 行末不要有多餘的空格
/* not good */
.element {
    color :red! important;
}

/* good */
.element {
    color: red !important;
}

/* not good */
.element ,
.dialog{
    ...
}

/* good */
.element,
.dialog {
    ...
}

2.需要空格的情況

  • 屬性值前
  • 選擇器'>', '+', '~'前後
  • '{'前
  • !important '!'前
  • @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;
}

引號

  • url的內容要用引號；
  • 屬性選擇器中的屬性值需要引號。
.element:after {
    content: "";
    background-image: url("logo.png");
}

input[type="checkbox"] {
    ...
}

命名

  • 類名使用小寫字母，以中劃線分隔；
  • id採用駝峰式命名；
  • scss中的變數、函式、混合、placeholder採用駝峰式命名。
/* class */
.element-content {
    ...
}

/* id */
#myDialog {
    ...
}

/* 變數 */
$colorBlack: #000;

/* 函式 */
@function pxToRem($px) {
    ...
}

/* 混合 */
@mixin centerBlock {
    ...
}

/* placeholder */
%myDialog {
    ...
}

顏色

顏色16進位制，用小寫字母表示，儘量用簡寫。

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

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

媒體查詢

儘量將媒體查詢的規則靠近與他們相關的規則；
不要將他們一起放到一個獨立的樣式檔案中，或者丟在文件的最底部，
這樣做只會讓大家以後更容易忘記他們。

.element {
    ...
}

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

SCSS相關

1.提交的程式碼中不要有 @debug；
2.宣告順序：

  • @extend
  • 不包含 @content 的 @include
  • 包含 @content 的 @include
  • 自身屬性
  • 巢狀規則

3.@import 引入的檔案不需要開頭的'_'和結尾的'.scss'；
4.巢狀最多不能超過5層；
5.@extend 中使用placeholder選擇器；
6.去掉不必要的父級引用符號&。

/* not good */
@import "_dialog.scss";

/* good */
@import "dialog";

/* not good */
.fatal {
    @extend .error;
}

/* good */
.fatal {
    @extend %error;
}

/* not good */
.element {
    & > .dialog {
        ...
    }
}

/* good */
.element {
    > .dialog {
        ...
    }
}

一些小建議

  • 不允許有空的規則；
  • 元素選擇器用小寫字母；
  • 去掉小數點前面的0；
  • 去掉數字中不必要的小數點和末尾的0；
  • 屬性值'0'後面不要加單位；
  • 同個屬性不同字首的寫法需要在垂直方向保持對齊；
  • 無字首的標準屬性應該寫在有字首的屬性後面；
  • 不要在同個規則裡出現重複的屬性，如果重複的屬性是連續的則沒關係；
  • 不要在一個檔案裡出現兩個相同的規則；
  • 用 border: 0; 代替 border: none;；
  • 選擇器不要超過4層（在scss中如果超過4層應該考慮用巢狀的方式來寫）；
  • 釋出的程式碼中不要有 @import；
  • 儘量少用'*'選擇器。
/* 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);
}

目錄索引

前端工程程式碼規範（一）——命名規則與工程約定
前端工程程式碼規範（二）——HTML
前端工程程式碼規範（四）——JS


相關文章