Less程式碼規範

and80506發表於2018-07-10

Less程式碼規範

Less程式碼校驗規則遵循stylelint:recommended

目錄

  1. 術語
- [規則宣告](#rule-declaration)
- [選擇器](#selectors)
- [屬性](#properties)
複製程式碼
  1. 檔案分類
  2. 命名規則
  3. 格式
  4. 註釋
  5. 書寫順序
- [Less書寫順序](#less-order)
- [屬性書寫順序](#rule-order)
複製程式碼
  1. 最佳實踐
  2. 典型錯誤
  3. 參考

術語

規則宣告

我們把一個（或一組）選擇器和一組屬性稱之為 “規則宣告”。舉個例子：

.listing {
  font-size: 18px;
  line-height: 1.2;
}
複製程式碼

選擇器

在規則宣告中，“選擇器” 負責選取 DOM 樹中的元素，這些元素將被定義的屬性所修飾。選擇器可以匹配 HTML 元素，也可以匹配一個元素的類名、ID, 或者元素擁有的屬性。以下是選擇器的例子：

.my-element-class {
  /* ... */
}

[aria-hidden] {
  /* ... */
}
複製程式碼

屬性

最後，屬性決定了規則宣告裡被選擇的元素將得到何種樣式。屬性以鍵值對形式存在，一個規則宣告可以包含一或多個屬性定義。以下是屬性定義的例子：

/* some selector */ {
  background: #f1f1f1;
  color: #333;
}
複製程式碼

檔案分類

頁面的樣式入口檔案按順序引入以下Less檔案。

  1. globals.less 全域性檔案
  2. components.less 元件
  3. sections.less 區塊
  4. main.less 頁面主體內容
/* globals.less */
@import "globals/mixins";
@import "globals/colors";
@import "globals/fonts";

/* components.less */
@import "components/tabs";
@import "components/modals";

/* sections.less */
@import "sections/header";
@import "sections/footer";

/* main.less */
@import "app/main";
複製程式碼

命名規則

CSS的命名規則

  1. 統一處理：建議在這個位置統一呼叫背景圖（這裡指多個佈局或模組或元件共用的圖）和清除浮動（這裡指通用性較高的佈局、模組、元件內的清除）等統一設定處理的樣式！
  2. 佈局（grid）（.g-）：將頁面分割為幾個大塊，通常有頭部、主體、主欄、側欄、尾部等！
  3. 模組（module）（.m-）：通常是一個語義化的可以重複使用的較大的整體！比如導航、登入、註冊、各種列表、評論、搜尋等！
  4. 元件（unit）（.u-）：通常是一個不可再分的較為小巧的個體，通常被重複用於各種模組中！比如按鈕、輸入框、loading、圖示等！
  5. 功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動等！不可濫用！
  6. 皮膚（skin）（.s-）：如果你需要把皮膚型的樣式抽離出來，通常為文字色、背景色（圖）、邊框色等，非換膚型網站通常只提取文字色！非換膚型網站不可濫用此類！
  7. 狀態（.z-）：為狀態類樣式加入字首，統一標識，方便識別，她只能組合使用或作為後代出現（.u-ipt.z-dis{}，.m-list li.z-sel{}），具體詳見命名規則的擴充套件相關項。 功能類和皮膚類樣式為表現化的樣式，請不要濫用！以上順序可以按需求適當調整。
/* 統一清除浮動 */
.g-bdc:after,
.m-dimg ul:after,
.u-tab:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  overflow: hidden;
  content: '.';
}
.g-bdc,
.m-dimg ul,
.u-tab {
  zoom: 1;
}
/* 佈局 */
.g-sd {
  float: left;
  width: 300px;
}
/* 模組 */
.m-logo {
  width: 200px;
  height: 50px;
}
/* 元件 */
.u-btn {
  height: 20px;
  border: 1px solid #333;
}
/* 功能 */
.f-tac {
  text-align: center;
}
/* 皮膚 */
.s-fc,
a.s-fc:hover {
  color: #fff;
}
複製程式碼

格式

  • 使用 2 個空格作為縮排。
  • 類名建議使用破折號代替駝峰法。
  • 在一個規則宣告中應用了多個選擇器時，每個選擇器獨佔一行。
  • 在規則宣告的左大括號 { 前加上一個空格。
  • 在屬性的冒號 : 後面加上一個空格，前面不加空格。
  • 規則宣告的右大括號 } 獨佔一行。
  • 規則宣告之間用空行分隔開。

註釋

  • 建議使用行註釋代替塊註釋。
  • 建議註釋獨佔一行。避免行末註釋。
  • 給沒有自注釋的程式碼寫上詳細說明，比如：
    • 為什麼用到了 z-index 例如，// modals are 6000, saving messages are 5500, header is 2000
    • 相容性處理或者針對特定瀏覽器的 hack

書寫順序

LESS書寫順序

  1. Extend （擴充套件）
  2. Mixins (混合)
  3. 常規樣式，在extends和mixins之後新增常規樣式允許我們正確地覆蓋這些屬性（如果需要）。
  4. 偽元素和偽類樣式
  5. 巢狀樣式
.weather {
  &:extend(.module);
  .transition(all 0.3s ease-out);
  background: LightCyan;
  &:hover {
    background: DarkCyan;
  }
  &::before {
    content: "";
    display: block;
  }
  > h3 {
    .transform(rotate(90deg));
    border-bottom: 1px solid white;
  }
  ...
}
複製程式碼

屬性書寫順序

→ 顯示屬性 自身屬性 文字屬性和其他修飾
display width font
visibility height text-align
position margin text-decoration
float padding vertical-align
clear border white-space
list-style overflow color
top min-width background

最佳實踐

  • 使用變數命名常用的數字和顏色

典型錯誤

  • 不要使用 ID 選擇器。
  • 不要使用!important
  • 不要使用瀏覽器私有字首，使用autoprefixer替代。
  • 巢狀選擇器的深度不要超過 3 層！
.page-container {
  .content {
    .profile {
      // STOP!
    }
  }
}
複製程式碼
  • 不要使用class作為javascript鉤子，在react中可使用refs替代javascript鉤子。
  • 巢狀選擇器的行數不要超過 50 行!

參考

相關文章