前端開發 css、less編寫規范

壹 ❀ 引

早在大半年前，我在負責整理定義了前端組JavaScript開發規范與less、css樣式開發規范。一直想將兩個規范整理成文章，但在整理了JavaScript規范后，我花了較多的時間在學習JavaScript基礎知識，所以對於樣式規范一直處於放置狀態。直到上周我收到了一條關於JavaScript規范的評論，提醒了我樣式規范不能再拖了，那么在放假前花點時間整理一遍作為復習也算不錯。

說在前面，本文雖然作為規范但對於less與css寫法也給出了部分建議，所以在閱讀本規范前建議讀者先掌握less基本用法，而對於規范這里也只是給出建議，畢竟適合自己的才是最好的，本文開始。

貳 ❀ 命名規范

貳 ❀ 壹 class、id命名

JavaScript變量我們推薦使用小駝峰，但樣式命名得做點改變，這里我們推薦使用 - 分隔符拼接。

/* good */
#foo-bar;.foo-bar

/* bad */
#fooBar;.fooBar

貳 ❀ 貳 less變量命名

我們知道less提供了樣式變量可供復用，對於多單詞變量命名推薦采用 @ 開頭並以 - 分隔符拼接的命名方式。

/* good */
@border-color:#fff;

/* bad */
@borderColor: #fff;

貳 ❀ 叄 less函數命名

除了變量，less還提供了函數用於復用多屬性class樣式類，關於函數推薦以 . 開頭 - 分割線拼接方式命名；形參若為多個單詞，推薦使用單詞首字母小寫方式簡寫，多個形參之間使用分號；隔離。（雖然函數用的不多）

/* good */
.foo-bar (@bg: #f5f5f5;@color: #900; @fz: 12px) {
    background: @bg;
    color: @color;
    font-size: @fz;
}

/* bad */
.foo-bar (@background: #f5f5f5, @color: #900, @font-size: 12px) {
    background: @background;
    color: @color;
    font-size: @font-size;
}

貳 ❀ 肆 less命名空間

less中的命名空間其實就是部分變量與混合模塊的包裝，對於命名空間推薦采用 # 開頭 - 分割線拼接方式進行統一。

/* good */
#foo-bar {
    .border-radius() {
        font-size: 12px;
    };
    .border-color() {
        color: #fff;
    }
}

叄 ❀ less文件引入

less一大好處就是支持將一個文件單純作為變量儲存文件，從而可以在其它less中引入使用，先說less引入用法，這里直接貼官網用法：

由於可能同時存在index.less文件與index.css文件，為了便於同名但不同后綴的文件區分，@import外部文件引入后綴__不推薦省略__，如果文件自身只作為引用使用而不需要編譯輸出，必須在文件引用時添加reference字段。

/* good */
@import 'demo.css'; //引入demo.css
@import (reference) 'demo.less';//引入demo.less,只作引用，不輸出demo的內容

/* bad */
@import 'demo.css'; //引入demo.css
@import 'demo';     //引入demo.less，並輸出

肆 ❀ css、less簡寫

肆 ❀ 壹 屬性值省略寫法

關於padding、margin：

/* good */
margin: 1px 2px;
padding: 2px;

/* bad */
margin: 1px 2px 1px 2px;
padding: 2px 2px 2px 2px;

當數值單位為0時，請省略單位；如果存在小數點，推薦去掉0簡寫：

/* good */
transition-duration: .5s;
margin-top: 0;

/* bad */
transition-duration: 0.5s;
margin-top: 0px;

顏色值推薦16進制寫法，而非RGB表現方式，當然如果需要使用透明度時還是可以使用RGB，請靈活變通：

/* good */
border-color: #f00;
color: #fefefe;

/* bad */
border-color: red;
color: rgb(254, 254, 254);

肆 ❀ 貳 不推薦使用元素選擇器+class/id組合

出於性能考慮，避免元素選擇器與class或id選擇器疊加使用，這種寫法違背了html與樣式分離的規則，如果html標簽修改還得對應修改css中的元素選擇器；其次，由於選擇器匹配規則是從右到左，本來定位到class或id就應該結束，如果你添加了元素選擇器，css還得再匹配所有的元素，非常耗性能，所以強烈不推薦。

/* good */
.foo-bar

/* bad */
div.foo-bar

肆 ❀ 叄 樣式復用

當多個選擇器具有共同屬性，推薦使用逗號分割選擇器進行復用，每個選擇器獨立成行。如果為less環境，也推薦變量，混入等其它做法。

/* good */
h1,
h2,
h3{
    color: #fff;
}

/* bad */
h1,h2,h3{
    color: #fff;
}

肆 ❀ 肆 使用less父選擇器&

偽類屬性建議采用父選擇器寫法代替傳統寫法，看幾個例子：

常見偽類，比如hover等

/* good */
a {
    color: #fff;
    &:hover {
        color: #ddd;
    }
}

/* bad */
a {
    color: #fff;
}
a:hover {
    color: #ddd;
}

clearfix hack示例：

/* good */
.demo {
    font-size: 12px;
    &:after {
        display: block;
        content: '';
        clear: both;
    }
}

/* bad */
.demo {
    font-size: 12px;
}
.demo:after {
    display: block;
    content: '';
    clear: both;
}

伍 ❀ 代碼組織結構

伍❀ 壹 以布局塊為單位划分樣式代碼

在書寫樣式前，請先划分頁面布局並以布局塊為單位書寫樣式，不可隨意零散定義。代碼塊書寫推薦從上到下，從左到右的書寫順序，不應該存在子級樣式定義早於父級，底層樣式定義早於上層樣式的情況。

比如頁面分為頭部，主體與尾部，那么尾部樣式早於頭部樣式定義；再如主體內部分為左右兩個盒子，右側盒子樣式不可早於左側盒子，這樣代碼更符合布局閱讀習慣。

/* good */
.parent {}
.child {}
.top {}
.bottom {}

/* bad */
.child {}
.parent {}
.bottom {}
.top {}

伍❀ 貳 less變量、函數請先定義后使用

變量、文件必須先聲明/引用再使用，其次，文件引用代碼應放在文件頭部。

/* good */
@import 'demo.less';
@color: #fff;
.page {
    color:@color;
}

/* bad */
@import 'demo.less';
.page {
    color:@color;
}
@color: #fff;

伍❀ 叄 樣式嵌套規則

less推薦嵌套寫法，且嵌套不推薦超過三層：

/* good */
.parent {
    color: #fff;
    .child{
        font-size: 12px;
    }
}

/* bad */
.parent {
    color: #fff;
}
.parent .child {
    font-size: 12px;
}

陸 ❀ 注釋要求

對於頁面整體布局中的大塊，推薦在樣式定義前添加注釋說明，例如：

/* good */
/* 頭部樣式定義 */
.header {}

/* 產品推薦樣式定義 */
.mayLike {}

柒 ❀ mixin混入要求

關於函數混入，如果被混入的屬性類自身不需要被編譯輸出，必須為屬性類加上括號()。

/* good */
.border-color() {
    color: #fff;
}
.demo {
    .border-color;
}

/* bad */
.border-color{
    color:#fff;
}
.demo{
    .border-color;
}

關於函數參數，若需要引用所有形參是一條屬性的不同值，推薦@arguments代替形參分散的寫法：

/* good */
.box-shadow(@x:0;@y:0;@blur:1;@color:#000){
    box-shadow:@arguments;
}

/* bad */
.box-shadow(@x:0; @y:0; @blur:1; @color:#fff){
    box-shadow:@x @y @blur @color;
}

捌 ❀ extend繼承要求

如果被混入的屬性類自身需要被編譯輸出，建議使用繼承來代替混入：

/* good */
.border-color{
    color: #fff;
}
.demo {
    &:extend(.border-color);
}
/* 編譯后 */
.border-color,
.demo{
    color: #fff;
}

/* bad */
.border-color{
    color: #fff;
}
.demo {
    .border-color;
}
/* 編譯后 */
.border-color{
    color: #fff;
}
.demo {
    color: #fff;
}

玖 ❀ 性能優化(補充)

• Display 屬性會影響頁面的渲染，請合理使用

  • display: inline后不應該再使用 width、height、margin、padding 以及 float；
  • display: inline-block 后不應該再使用 float；
  • display: block 后不應該再使用 vertical-align；
  • display: table-* 后不應該再使用 margin 或者 float；

• float在渲染時計算量比較大，勿濫用float；情況允許下推薦flex進行布局。

• 動畫優化

  • 使用 translate 取代 absolute 定位就會得到更好的 fps，動畫會更順滑。
  • 避免通過類似 jQuery animate()-style 改變每幀的樣式，使用 CSS 聲明動畫會得到更好的瀏覽器優化。
  • 如果使用基於 javaScript 的動畫，盡量使用 requestAnimationFrame. 避免使用 setTimeout, setInterval。（關於css動畫我會單獨介紹，先留個坑）

• 提升 CSS 選擇器性能，合理使用關鍵選擇器

  • 特別說明，CSS選擇器匹配機制是從右到左匹配，只要當前選擇符的左邊還有其他選擇符，樣式系統就會繼續向左移動，直到找到和規則匹配的選擇符，或者因為不匹配而退出。所以我們把最右邊選擇符稱之為關鍵選擇器。
  • 避免使用通用選擇器 .content * {color: red;}
  • 避免使用標簽限制 id 選擇器 button#backButton {…}
  • 避免使用標簽限制 class 選擇器 treecell.indented {…}
  • 避免使用多層標簽選擇器，請使用 class 選擇器替換，減少css查找。
  • 避免使用后代選擇器，請盡可能標明層級關系。

• 減少回流(重排)

  • 如果你要控制一個元素位移，建議先將它脫離文檔流。
  • 盡量少改變font-size和font-family
  • 少改變元素的內外邊距
  • 使用Flex時取代inline-block和float時，雖然都會回流，但flex性能更佳。

拾 ❀ 總

那么到這里，關於css、less規范就介紹完畢了，樣式雖然簡單，但通過合理的規划，不管是在后期維護代碼或者去讀懂同事的代碼，都會帶來意想不到的便利。

說好一個月最少寫八篇博客，還差三篇只能回家寫了。現在是2020年1月20日零點18分，過完今天我就要回家過年啦！！！！雖然我還沒搶到回家的票...明天還是找黃牛安排一下，那么晚安，我又熬夜了。