BEM實戰之扒一扒淘票票頁面

BEM解析

BEM是一套CSS國際命名規範，是一個很是有用的功能強大且簡單的命名約定，它能使前端代碼更易讀，易於理解易於擴展。BEM是塊（block）、元素（element）、修飾符（modifier）的縮寫。

• B：Block是塊，一個獨立的組件，將全部東西都劃分紅一個組件
• E：Element是塊中的子節點，爲了代表子節點屬於哪一個塊，寫法是 block__element
• M：Modifier聲明某個節點的修飾狀態
  咱們以一個搜索框來簡單說明上述三個東西的用法：

這個搜索框就能夠看做一個塊Block，這個塊裏由兩個子節點，一個是輸入區域input，還有一個是查詢按鈕button。
對於這個塊的命名，按照BEM法則，咱們能夠寫成如下這樣：

<form class="site-search">
    <input type="text" class="site-search__input">
    <input type="button" class="site-search__button" value="search">
</form>複製代碼

將總體的搜索框命名爲site-search做爲一個模塊，模塊下的兩個子節點就在後面加上兩根下劃線，加上本身的名字 input 和 button，這樣的命名方式，即便咱們沒有看到網頁內容，只看了CSS樣式名字，也能感覺到頁面結構和頁面元素之間的關係。
若是要說明按鈕button是灰色的，咱們還能夠加上修飾的類名modifier，好比能夠是site-search__button--gray。

上圖就說明能將某個元素進行模塊化，裏面可以包含多個元素，這樣的命名規範可以更好的說明元素之間的關係。

爲何要使用BEM方式命名

你是否遇到過寫CSS樣式名抓耳撓腮的時候？你是否遇到過團隊合做時看不清別人代碼，只能無奈的說「這個CSS重寫一遍比修改老文件快」？


BEM命名法則給咱們帶來了如下的便利：

• BEM命名法則給咱們提供了一個很好的模板，在命名中就能體現各個元素之間的關係，CSS的命名更加語義化，元素更易讀懂。
• 並且獨一無二的命名方式，使得代碼可以獲得更好的複用，就不用在寫樣式名的時候當心翼翼，生怕和先後文的樣式名重名，致使元素組件的樣式被覆蓋。
• 剛接觸BEM命名方式可能會以爲一個元素的類名這麼冗長，比較難看，可就是這種冗長的命名，極大的減小了類名重複的可能性。
  BEM官網說明這種命名規範最關鍵的特徵就是：

  BEM的關鍵特徵就是塊的獨立性。按照CSS的建議，能夠在網頁上的任何位置放置一個塊，並確保不會受到周圍環境的影響。並且，若是您最近須要將另外一個塊嵌套到當前塊中，則它們的徹底兼容性將獲得保證。換句話說，在維護Web應用程序時，您能夠在整個頁面上移動塊，添加其餘項並將其組合起來。

扒一扒淘票票界面

淘票票界面寫的挺美觀的，可是最近看了看淘票票的CSS命名方式，以爲稍有不妥。
好比淘票票最頂部的索引橫條。

如下是淘票票對於頂部導航欄的CSS命名，爲了讓你們更好看清頁面結構，我對頁面元素進行了簡單的處理，以及添加了幾行註釋：

<div class="head-wrap" data-spm="header">
    <div class="head-content center-wrap">
        <!-- logo：淘票票logo的放置 -->
        <h1 class="logo">
        </h1>
        <!-- cityWrap：有一欄顯示當前城市 -->
        <div class="cityWrap M-cityWrap">
        </div>
        <!-- nav-wrap：幾個切換頁面的地方 -->
        <div class="nav-wrap">
            <ul class="nav">
                <li class="J_NavItem current ">
                    <a href="#" target="_top">首頁</a>
                </li>
            </ul>
        </div>
        <!-- entrance-wrap：最右邊的兩個導骯 -->
        <div class="entrance-wrap">
            <ul class="entrance">
                <li class="entrance-item">
                    <a class="phone" href="#" target="_blank">手機購買</a>
                </li>
                <li class="entrance-item">
                    <a class="service">客服諮詢</a>
                </li>
            </ul>
        </div>
    </div>
</div>複製代碼

這裏存在兩個較爲嚴重的問題：
一、頁面結構不清晰。從CSS的命名方式上來看，很難看得出上面這些類是放在一塊的，同一模塊中的內容缺乏聯繫。
二、CSS命名與頁面內容掛鉤，代碼複用性低。觀察以上的命名方式，好比cityWrap、entrance、phone之類的，命名方式都和頁面內容掛鉤，這種命名方式缺點就是不能挪到其餘地方進行復用。由於其餘頁面可能沒有城市、入口、手機這些內容。或者，萬一頁面元素要進行更改，好比把城市（cityWrap）改爲國家（country），爲了保持CSS和頁面內容的統一性，就要更改全部的CSS樣式，給代碼的維護增長了不小的困難。


個人更改建議是使用BEM命名法則，將頁面元素模塊化.
整個導航欄做爲一個模塊，模塊能夠分爲典型的三層：head、body、footer，分別存放logo、導航條內容、尾部的其餘功能：

<!-- 整個導航欄堪稱一個模塊Block，由三個子節點Element -->
<div class="head-wrap" data-spm="header">

    <div class="head-wrap__hd">
        <h1 class="head-wrap__logo">
        </h1>
    </div>

    <div class="head-wrap__bd">
        <div class="head-wrap__bd__title">南昌</div>
        <div class="head-wrap__bd__content">
            <ul class="head-wrap__bd__item">
                <li class="head-wrap__bd__items">首頁</li>
            </ul>
        </div>
    </div>

    <div class="head-wrap__ft">
        <ul class="head-wrap__ft__item">
            <li class="head-wrap__ft__items"><a>手機購買</a></li>
        </ul>
    </div>
</div>複製代碼

導航條當作一整個模塊Block，該模塊有三個子節點元素Elemet，通過這種命名方式，即便不看頁面元素，只看CSS元素的類名，是否是也能猜出大概結構來呢？並且不使用頁面的內容做爲命名方式，這樣的話，之後有相似結構的頁面，也能直接複用這一套CSS樣式，同時，清晰的命名方式也讓頁面維護變得更爲簡單。

Segmentfault 文章地址：segmentfault.com/a/119000001…