Less代碼規範

Less代碼規範

Less代碼校驗規則遵循stylelint:recommended

• stylelint:recommended
• stylelint詳細規則

目錄

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 行!

參考

• Airbnb CSS / Sass 指南
• Netease CSS規範
• Sass Style Guide