生活随笔
收集整理的這篇文章主要介紹了
Less代码规范
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Less代碼規范
Less代碼校驗規則遵循stylelint:recommended
- stylelint:recommended
- stylelint詳細規則
目錄
術語- [規則聲明](#rule-declaration)
- [選擇器](#selectors)
- [屬性](#properties)
復制代碼 文件分類命名規則格式注釋書寫順序- [Less書寫順序](#less-order)
- [屬性書寫順序](#rule-order)
復制代碼 最佳實踐典型錯誤參考 術語
規則聲明
我們把一個（或一組）選擇器和一組屬性稱之為 “規則聲明”。舉個例子：
.listing {
font-size:
18px;
line-height:
1.2;
}
復制代碼 選擇器
在規則聲明中，“選擇器” 負責選取 DOM 樹中的元素，這些元素將被定義的屬性所修飾。選擇器可以匹配 HTML 元素，也可以匹配一個元素的類名、ID, 或者元素擁有的屬性。以下是選擇器的例子：
.my-element-class {
}
[aria-hidden] {
}
復制代碼 屬性
最后，屬性決定了規則聲明里被選擇的元素將得到何種樣式。屬性以鍵值對形式存在，一個規則聲明可以包含一或多個屬性定義。以下是屬性定義的例子：
{
background:
#f1f1f1;
color:
#333;
}
復制代碼 文件分類
頁面的樣式入口文件按順序引入以下Less文件。
globals.less 全局文件components.less 組件sections.less 區塊main.less 頁面主體內容
@import "globals/mixins";
@import "globals/colors";
@import "globals/fonts";
@import "components/tabs";
@import "components/modals";
@import "sections/header";
@import "sections/footer";
@import "app/main";
復制代碼 命名規則
CSS的命名規則
統一處理：建議在這個位置統一調用背景圖（這里指多個布局或模塊或元件共用的圖）和清除浮動（這里指通用性較高的布局、模塊、元件內的清除）等統一設置處理的樣式！布局（grid）（.g-）：將頁面分割為幾個大塊，通常有頭部、主體、主欄、側欄、尾部等！模塊（module）（.m-）：通常是一個語義化的可以重復使用的較大的整體！比如導航、登錄、注冊、各種列表、評論、搜索等！元件（unit）（.u-）：通常是一個不可再分的較為小巧的個體，通常被重復用于各種模塊中！比如按鈕、輸入框、loading、圖標等！功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動等！不可濫用！皮膚（skin）（.s-）：如果你需要把皮膚型的樣式抽離出來，通常為文字色、背景色（圖）、邊框色等，非換膚型網站通常只提取文字色！非換膚型網站不可濫用此類！狀態（.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書寫順序
Extend （擴展）Mixins (混合)常規樣式，在extends和mixins之后添加常規樣式允許我們正確地覆蓋這些屬性（如果需要）。偽元素和偽類樣式嵌套樣式.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 {}}
}
復制代碼- 不要使用class作為javascript鉤子，在react中可使用refs替代javascript鉤子。
- 嵌套選擇器的行數不要超過 50 行!
參考
- Airbnb CSS / Sass 指南
- Netease CSS規范
- Sass Style Guide
總結
以上是生活随笔為你收集整理的Less代码规范的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
