1. 樣式屬性順序
單個樣式規(guī)則下的屬性在書寫時，應(yīng)按功能進(jìn)行分組，組之間需要有一個空行。
同時要以Positioning Model > Box Model > Typographic > Visual 的順序書寫，提高代碼的可讀性。
Positioning Model 布局方式、位置，相關(guān)屬性包括：position, top, z-index, display, float等
Box Model 盒模型，相關(guān)屬性包括：width, height, padding, margin，border,overflow
Typographic 文本排版，相關(guān)屬性包括：font, line-height, text-align
Visual 視覺外觀，相關(guān)屬性包括：color, background, list-style, transform, animation
2. CSS選擇器命名規(guī)則
分類式命名法(在前端組件化下尤為重要)
布局（grid）（.g-）：將頁面分割為幾個大塊，通常有頭部、主體、主欄、側(cè)欄、尾部等！
模塊（module）（.m-）：通常是一個語義化的可以重復(fù)使用的較大的整體！比如導(dǎo)航、登錄、注冊等
元件（unit）（.u-）：通常是一個不可再分的較為小巧的個體，通常被重復(fù)用于各種模塊中！比如按鈕、輸 入框、loading等！
功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現(xiàn)，比如清除浮動等！不可濫用！
狀態(tài)（.z-）：為狀態(tài)類樣式加入前綴，統(tǒng)一標(biāo)識，方便識別，她只能組合使用或作為后代出現(xiàn)（.u-ipt.z-dis{}，.m-list li.z-sel{}）
javascript(.j-)：.j-將被專用于JS獲取節(jié)點(diǎn)，請勿使用.j-定義樣式
不要使用 " _ " 下劃線來命名css
能良好的區(qū)分javascript變量名
輸入的時候少按一個shift鍵
瀏覽器兼容性問題（比如使用_tips的選擇器命名，在IE6是無效的）
id采用駝峰式命名(不要亂用id)
scss中的變量、函數(shù)、混合、placeholder采用駝峰式命名
相同語義的不同類命名方法：
直接加數(shù)字或字母區(qū)分即可（如：.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{}/* 先共性 優(yōu)化組合 */
.m-nav li{}/* 后個性 語義化標(biāo)簽選擇器 */
.m-nav a{}/* 后個性中的共性 按結(jié)構(gòu)順序 */
.m-nav a.a1{}/* 后個性中的個性 */
.m-nav a.a2{}/* 后個性中的個性 */
.m-nav .z-crt a{}/* 交互狀態(tài)變化 */
.m-nav .z-crt a.a1{}
.m-nav .z-crt a.a2{}
.m-nav .btn{}/* 典型后代選擇器 */
.m-nav .btn-1{}/* 典型后代選擇器擴(kuò)展 */
.m-nav .btn-dis{}/* 典型后代選擇器擴(kuò)展（狀態(tài)） */
.m-nav .btn.z-dis{}/* 作用同上，請二選一（如果可以不兼容IE6時使用） */
.m-nav .m-sch{}/* 控制內(nèi)部其他模塊位置 */
.m-nav .u-sel{}/* 控制內(nèi)部其他元件位置 */
.m-nav-1{}/* 模塊擴(kuò)展 */
.m-nav-1 li{}
.m-nav-dis{}/* 模塊擴(kuò)展（狀態(tài)） */
.m-nav.z-dis{}/* 作用同上，請二選一（如果可以不兼容IE6時使用） */
- 統(tǒng)一語義理解和命名
語義 | 命名 | 簡寫
-- | -- | --
文檔 | doc | doc
頭部 | head | hd
主體 | body | bd
尾部 | foot | ft
主欄 | main | mn
主欄子容器 | mainc | mnc
側(cè)欄 | side | sd
側(cè)欄子容器 | sidec | sdc
盒容器 | wrap/box | wrap/box
導(dǎo)航 | nav | nav
子導(dǎo)航 | subnav | snav
面包屑 | crumb | crm
菜單 | menu | menu
選項卡 | tab | tab
標(biāo)題區(qū) | head/title | hd/tt
內(nèi)容區(qū) | body/content | bd/ct
列表 | list | lst
表格 | table | tb
表單 | form | fm
熱點(diǎn) | hot | hot
排行 | top | top
登錄 | login | log
標(biāo)志 | logo | logo
廣告 | advertise | ad
搜索 | search | sch
幻燈 | slide | sld
提示 | tips | tips
幫助 | help | help
新聞 | news | news
下載 | download | dld
注冊 | regist | reg
投票 | vote | vote
版權(quán) | vcopyright | cprt
結(jié)果 | result | rst
標(biāo)題 | title | tt
按鈕 | button | btn
輸入 | input | ipt
清除浮動 | clearboth | cb
左浮動 | floatleft | fl
內(nèi)聯(lián) | inlineblock | ib
文本居中 | textaligncenter | tac
垂直居中 | verticalalignmiddle | vam
溢出隱藏 | overflowhidden | oh
完全消失 | displaynone | dn
字體大小 | fontsize | fz
字體粗細(xì) | fontweight | fs
字體顏色 | fontcolor | fc
背景顏色 | backgroundcolor | bgc
邊框顏色 | bordercolor | bdc
選中 | selected | sel
當(dāng)前 | current | crt
顯示 | show | show
隱藏 | hide | hide
打開 | open | open
關(guān)閉 | close | close
出錯 | error | err
不可用 | disabled | dis
5. 注意事項
一律小寫，中劃線
盡量不用縮寫
不要隨便使用id
去掉小數(shù)點(diǎn)前面的0： 0.9rem => .9rem
使用簡寫：margin： 0 1rem 3rem
轉(zhuǎn)載于：css書寫規(guī)范
