css書寫規範

wupengyu發表於2018-05-07
CSS

在書寫css樣式的時候總是無意中就寫亂了，無論是命名或者是樣式的書寫順序，這裡做一個總結，提醒自己在書寫css的時候時刻注意，大家可以參考哈。

1. 樣式屬性順序

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

  1. Positioning Model 佈局方式、位置，相關屬性包括：position, top, z-index, display, float等
  2. Box Model 盒模型，相關屬性包括：width, height, padding, margin，border,overflow
  3. Typographic 文字排版，相關屬性包括：font, line-height, text-align
  4. Visual 視覺外觀，相關屬性包括：color, background, list-style, transform, animation

2. CSS選擇器命名規則

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

    1. 佈局（grid）（.g-）：將頁面分割為幾個大塊，通常有頭部、主體、主欄、側欄、尾部等！
    2. 模組（module）（.m-）：通常是一個語義化的可以重複使用的較大的整體！比如導航、登入、註冊等
    3. 元件（unit）（.u-）：通常是一個不可再分的較為小巧的個體，通常被重複用於各種模組中！比如按鈕、輸 入框、loading等！
    4. 功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動等！不可濫用！
    5. 狀態（.z-）：為狀態類樣式加入字首，統一標識，方便識別，她只能組合使用或作為後代出現（.u-ipt.z-dis{}，.m-list li.z-sel{}）
    6. 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-)

    語義 命名 簡寫
    文件 doc doc
    頭部 head hd
    主體 body bd
    尾部 foot ft
    主欄 main mn
    主欄子容器 mainc mnc
    側欄 side sd
    側欄子容器 sidec sdc
    盒容器 wrap/box wrap/box

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

    語義 命名 簡寫
    導航 nav nav
    子導航 subnav snav
    麵包屑 crumb crm
    選單 menu menu
    選項卡 tab tab
    標題區 head/title hd/tt
    內容區 body/content bd/ct
    列表 list lst
    表格 table tb
    表單 form fm
    熱點 hot hot
    排行 top top
    登入 login log
    標誌 logo logo
    廣告 advertise ad
    搜尋 search sch
    幻燈 slide sld
    提示 tips tips
    幫助 help help
    新聞 news news
    下載 download dld
    註冊 regist reg
    投票 vote vote
    版權 vcopyright cprt
    結果 result rst
    標題 title tt
    按鈕 button btn
    輸入 input ipt

  • 功能（.f-）

    語義 命名 簡寫
    清除浮動 clearboth cb
    左浮動 floatleft fl
    內聯 inlineblock ib
    文字居中 textaligncenter tac
    垂直居中 verticalalignmiddle vam
    溢位隱藏 overflowhidden oh
    完全消失 displaynone dn
    字型大小 fontsize fz
    字型粗細 fontweight fs

  • 皮膚（.s-）

    語義 命名 簡寫
    字型顏色 fontcolor fc
    背景顏色 backgroundcolor bgc
    邊框顏色 bordercolor bdc

  • 狀態(.z-)

    語義 命名 簡寫
    選中 selected sel
    當前 current crt
    顯示 show show
    隱藏 hide hide
    開啟 open open
    關閉 close vclose
    出錯 error err
    不可用 disabled dis

5. 注意事項

  1. 一律小寫，中劃線
  2. 儘量不用縮寫
  3. 不要隨便使用id
  4. 去掉小數點前面的0： 0.9rem => .9rem
  5. 使用簡寫：margin： 0 1rem 3rem

本文大部分內容參考自網易前端規範：http://nec.netease.com/standa…

相關文章