如何寫出優雅耐看的css程式碼？css命名小技巧分享！

前端（vue）入門到精通課程：進入學習

CSS命名——BEM

BEM是什麼

BEM是一種CSS命名規範。【推薦學習：】

BEM代表 「塊（block），元素（element），修飾符（modifier）」。

在選擇器中，由以下三種符號來表示擴充套件的關係：

-   中劃線 ：僅作為連字元使用，表示某個塊或者某個子元素的多單詞之間的連線記號。
__  雙下劃線：雙下劃線用來連線塊和塊的子元素
_   單下劃線：單下劃線用來描述一個塊或者塊的子元素的一種狀態

使用BEM範例對比

Block

如下面的例子，li.item 是列表的一個子元素

/* 常規寫法和BEM寫法相同 */
.list

元素(Element)

/* 常規寫法 */ 
  <ul class="list">
    <li class="item">Pricing</li>
    <li class="item">Contact</li>
  </ul>
  
/* BEM寫法 */   
   <ul class="list">
    <li class="list__item">Pricing</li>
    <li class="list__item">Contact</li>
  </ul>

/* 常規寫法 */ 
.list{} 
.list .item{} 

/* BEM寫法 */ 
.list{} 
.list__item{}

修飾符(modifier)

一個「修飾符」可以理解為一個塊的特定狀態！

/* 常規寫法 */ 
  <ul class="list">
    <li class="item">Pricing</li>
    <li class="item">Contact</li>
  </ul>
  
/* BEM寫法 */   
  <ul class="list">
    <li class="list__item_active">
      Pricing
    </li>
    <li class="list__item">Contact</li>
  </ul>

/* 常規寫法 */ 
.list{} 
.list .item{} 
.list .item.active{} 

/* BEM寫法 */ 
.list{} 
.list__item{}
.list__item_active{}

BEM 的好處

• 擺脫特異性的困擾
• 修復繼承問題
• 停止擔心命名

css命名幾大原則

短命名比長命名會更好

因為短命名縮短書寫時間，也減小了css檔案大小！例如這個例子:

//  推薦
.some-intro{...}

// 不推薦
.some-introduction{...}

組合命名比單命名會更好

// 不建議
.header{...}

//推薦
.cs-header{...}

面向屬性的命名和麵向語意的命名

面向屬性的命名指選擇器的命名是跟著具體的CSS樣式走的，與專案、頁面、模組統統沒有關係。例如，比較經典的清除浮動類名.clearfix:

.clearfix:after { content : ''; display: table; clear: both; }

面向語意的命名則是根據應用元素所處的上下文來命名的。例如:

.header { background-color: #333; color: #fff; }
.logo {font-size: 0; color : transparent;}

上述兩種命名方式各有優缺點：

1、面向屬性

• 優點:在於CSS的重用率高，效能最佳，隨插即用，方便快捷，開發也極為迅速，因為它省去了大量在 HTML 和CSS檔案之間切換的時間。
• 缺點：在於由於屬性單一，其適用場景有限，另外因為使用方便，易被過度使用，從而帶來更高的維護成本。

2、面向語意

• 優點是應用場景廣泛，可以實現非常精緻的佈局效果，擴充套件方便；
• 缺點：在於程式碼囉唆，開發效率一般，因為所有HTML都需要命名，哪怕是一個10畫素的間距。這就導致很多開發者要麼選擇直接使用標籤選擇器，要麼就選擇一個簡單的類名，然後通過父子關係限定樣式，結果帶來了更糟糕的維護問題。

命名彙總推薦

狀態

前一個    prev
後一個    next
當前的    current

顯示的    show
隱藏的    hide
開啟的    open
關閉的    close

選中的    selected
有效的    active
預設的    default
反轉的    toggle

禁用的    disabled
危險的    danger
主要的    primary
成功的    success
提醒的    info
警告的    warning
出錯的    error

大型的    lg
小型的    sm
超小的    xs

佈局

檔案    doc
頭部    header(hd)
主體    body    
尾部    footer(ft)    
主欄    main
側欄    side    
容器    box/container

通用部件

列表    list
列表項  item
表格    table    
表單    form
連結    link
標題    caption/heading/title
選單    menu
集合    group
條      bar
內容    content    
結果    result

元件

按鈕        button(btn)
字型        icon
下拉式選單    dropdown
工具列      toolbar
分頁        page
縮圖      thumbnail
警告框      alert
進度條      progress
導覽列      navbar
導航        nav    
子導航      subnav
麵包屑      breadcrumb(crumb)    
標籤        label
徽章        badge
巨幕        jumbotron
面板        panel
窪地        well
分頁      tab
提示框      tooltip
彈出框      popover
輪播圖      carousel
手風琴      collapse 
定位浮標    affix

語意化小部件

品牌        brand
標誌        logo
額外部件    addon
版權        copyright
註冊        regist(reg)
登入        login
搜尋        search    
熱點        hot
幫助        help
資訊        info
提示        tips
開關        toggle
新聞        news
廣告        advertise(ad)
排行        top    
下載        download

功能部件

左浮動    fl
右浮動    fr
清浮動    clear

命名網站推薦

codelf：https://unbug.github.io/codelf

參考檔案：

1、張鑫旭的《css選擇世界》

2、https://www.cnblogs.com/qianxiaox/p/13816077.html

（學習視訊分享：）

以上就是如何寫出優雅耐看的css程式碼？css命名小技巧分享！的詳細內容，更多請關注TW511.COM其它相關文章！