推薦大家看看百度FEX前端團隊和騰訊AlloyTeam前端團隊的CSS代碼規范。

fex-team/styleguide?github.comCode Guide by @AlloyTeam?alloyteam.github.io

---

1. 樣式屬性順序

單個樣式規則下的屬性在書寫時，應按功能進行分組，組之間需要有一個空行。
同時要以Positioning Model > Box Model > Typographic > Visual 的順序書寫，提高代碼的可讀性。

Positioning Model 布局方式、位置，相關屬性包括：position, top, z-index, display, float等

Box Model 盒模型，相關屬性包括：width, height, padding, margin，border,overflow

Typographic 文本排版，相關屬性包括：font, line-height, text-align

Visual 視覺外觀，相關屬性包括：color, background, list-style, transform, animation

2. CSS選擇器命名規則

• 分類式命名法(在前端組件化下尤為重要)

布局（grid）（.g-）：將頁面分割為幾個大塊，通常有頭部、主體、主欄、側欄、尾部等！

模塊（module）（.m-）：通常是一個語義化的可以重復使用的較大的整體！比如導航、登錄、注冊等

元件（unit）（.u-）：通常是一個不可再分的較為小巧的個體，通常被重復用于各種模塊中！比如按鈕、輸 入框、loading等！

功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動等！不可濫用！

狀態（.z-）：為狀態類樣式加入前綴，統一標識，方便識別，她只能組合使用或作為后代出現（.u-ipt.z-dis{}，.m-list li.z-sel{}）

javascript(.j-)：.j-將被專用于JS獲取節點，請勿使用.j-定義樣式

• 不要使用 " _ " 下劃線來命名css
  能良好的區分javascript變量名
  輸入的時候少按一個shift鍵
  瀏覽器兼容性問題（比如使用_tips的選擇器命名，在IE6是無效的）
• id采用駝峰式命名(不要亂用id)
• scss中的變量、函數、混合、placeholder采用駝峰式命名
• 相同語義的不同類命名方法：
  直接加數字或字母區分即可（如：.m-list、.m-list2、.m-list3等，都是列表模塊，但是是完全不一樣的模塊）。其他舉例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。
• 命名方式(BEM)：類-體（例：g-head）、類-體-修飾符（例：u-btn-active）
• 后代選擇器：體-修飾符即可（例：.m-page .cut{}）注：后代選擇器不要在頁面布局中使用，因為污染的可能性較大；

3. 最佳寫法

/* 這是某個模塊 */.m-nav{}/* 模塊容器 */.m-nav li,.m-nav a{}/* 先共性 優化組合 */.m-nav li{}/* 后個性 語義化標簽選擇器 */.m-nav a{}/* 后個性中的共性 按結構順序 */.m-nav a.a1{}/* 后個性中的個性 */.m-nav a.a2{}/* 后個性中的個性 */.m-nav .z-crt a{}/* 交互狀態變化 */.m-nav .z-crt a.a1{}.m-nav .z-crt a.a2{}.m-nav .btn{}/* 典型后代選擇器 */.m-nav .btn-1{}/* 典型后代選擇器擴展 */.m-nav .btn-dis{}/* 典型后代選擇器擴展（狀態） */.m-nav .btn.z-dis{}/* 作用同上，請二選一（如果可以不兼容IE6時使用） */.m-nav .m-sch{}/* 控制內部其他模塊位置 */.m-nav .u-sel{}/* 控制內部其他元件位置 */.m-nav-1{}/* 模塊擴展 */.m-nav-1 li{}.m-nav-dis{}/* 模塊擴展（狀態） */.m-nav.z-dis{}/* 作用同上，請二選一（如果可以不兼容IE6時使用） */

4. 統一語義理解和命名

• 布局(.g-)

• 模塊（.m-）、元件（.u-）

• 功能（.f-）

• 皮膚（.s-）

• 狀態(.z-)

5. 注意事項

一律小寫，中劃線

盡量不用縮寫

不要隨便使用id

去掉小數點前面的0： 0.9rem => .9rem

使用簡寫：margin： 0 1rem 3rem

---

CSS書寫順序
　　1.位置屬性(position, top, right, z-index, display, float等)
　　2.大小(width, height, padding, margin)
　　3.文字系列(font, line-height, letter-spacing, color- text-align等)
　　4.背景(background, border等)
　　5.其他(animation, transition等)

CSS書寫規范使用CSS縮寫屬性
　　CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。

　　去掉小數點前的“0”

　　簡寫命名
　　很多用戶都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦!

　　16進制顏色代碼縮寫
　　有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗為主。

　　連字符CSS選擇器命名規范
　　1.長名稱或詞組可以使用中橫線來為選擇器命名。
　　2.不建議使用“_”下劃線來命名CSS選擇器，為什么呢?
　　輸入的時候少按一個shift鍵;
　　瀏覽器兼容問題 (比如使用_tips的選擇器命名，在IE6是無效的)
　　能良好區分JavaScript變量命名(JS變量命名是用“_”)

　　不要隨意使用Id
　　id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復使用，另外id的優先級優先與class，所以id應該按需使用，而不能濫用。　

　　為選擇器添加狀態前綴
　　有時候可以給選擇器添加一個表示狀態的前綴，讓語義更明了，比如下圖是添加了“.is-”前綴。

總結

以上是生活随笔為你收集整理的css 样式尾部带感叹号是什么意思_CSS书写规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。