前端開發 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分，過完今天我就要回家過年啦！！！！雖然我還沒搶到回家的票...明天仍是找黃牛安排一下，那麼晚安，我又熬夜了。