更好用的css命名方式——BEM命名

1、什麼是BEM？

　　BEM表明塊（Block），元素（Element），修飾符（Modifier）。不管是什麼網站頁面，均可以拆解成這三部分。

2、帶你認識網頁

　　咱們來看一下qq的官網，它能夠由三個塊組成：logo，導航nav和頁面主題mian三個模塊構成，若是再細分一下呢？logo是由圖片和文字兩個元素組成，導航由三個元素組成，頁面主題中包含圖片，文字和按鈕三個元素，

若是把一個塊看做是一個數組的話，那麼元素就是數組中的每一項。

　　什麼是修飾符呢？你能夠看做是元素的屬性，或者是他的形態、狀態，好比導航中的三個元素有的長，有的短，頁面主體文字有的大，有的小

3、BEM命名如何書寫

　　BEM給咱們的規定是塊和元素之間用 — 鏈接，元素和修飾符之間用 _ 鏈接。例如：咱們要設置表格某一行的背景顏色爲紅色，咱們能夠以下命名

4、實戰篇

　　下面，咱們來用bem的命名規範來寫一下qq的官網

　　<header>
        <div class="logo">
            <img class="logo-img" src="./logo.png" alt="">
            <span class="logo-words_big">QQ·</span>
            <span class="logo-word_small">PC版</span>
        </div>
        <ul class="nav">
            <li class="nav-item">QQ官網首頁</li>
            <li class="nav-item">申請QQ</li>
            <li class="nav-item">當前在線用戶:2559393943</li>
        </ul>
    </header>
    <div class="main">
        <img class="main-img" src="./img.png" alt="" >
        <div class="main-words_small">QQ PC版9.0.8</div>
        <div class="main-words_big">重新出發·趣無止境</div>
        <button class="mian-button_blue">當即下載</button>
    </div>

是否是清晰了不少，即便是換做另外一我的修改這個頁面也是一眼就能找到的。這樣就大大減小了咱們的維護成本。

5、拓展

　　

　　若是你仍是不太理解什麼是BEM，不要緊，咱們和人體結合一下，看看他們之間有什麼類似之處。

　　上面是一張小女孩的人體結構圖，咱們能夠把她分紅三個部門，也就是三個塊（Block），分別是頭（header），身體(body)和腳(footer)，咱們單看頭部，裏邊有不少個元素（Element）組成，好比頭髮（hair）、眼睛（eye）、耳朵（ear）、牙齒（tooth）等等，

身體裏呢？包含胳膊（arm）、手指（finger）等元素構成，腳部由腳（foot）和腳趾（toe）組成。小女孩的頭髮是棕色的(brown)，好了，咱們能夠用BEM規範來命名一下小女孩的結構了

<div class="header">
        <div class="header-hair_brown"></div>
        <div class="header-eye"></div>
        <div class="header-ear">
            <div class="header-ear_left"></div>
            <div class="header-ear_right"></div>
        </div>
        .......
    </div>
    <div class="body">
        <div class="body-arm">
            <div class="body-arm_left"></div>
            <div class="body-arm_right"></div>
        </div>
        <div class="finger"></div>
        .......
    </div>
    <div class="footer">
        <div class="footer-foot"></div>
        <div class="footer-toe"></div>
    </div>

6、結束語

　　BEM是一個很是有用，強大，簡單的命名約定，以致於讓你的前端代碼更容易閱讀和理解，更容易協做，更容易控制，更加健壯和明確並且更加嚴密。它對前端開發者都是一個巨有價值的工具。

原文：https://www.bbsmax.com/A/kjdwbexq5N/