使用BEM命名規范來組織CSS代碼

BEM 是 Block（塊） Element（元素） Modifier（修飾器）的簡稱

使用BEM規范來命名CSS，組織HTML中選擇器的結構，利於CSS代碼的維護，使得代碼結構更清晰（弊端主要是名字會稍長）

 

如何使用BEM

1. 一個獨立的（語義上或視覺上），可以復用而不依賴其它組件的部分，可作為一個塊（Block）
2. 屬於塊的某部分，可作為一個元素（Element）
3. 用於修飾塊或元素，體現出外形行為狀態等特征的，可作為一個修飾器（Modifier）

 

在本規范中，以雙下划線 __ 來作為塊和元素的間隔，以單下划線 _ 來作為塊和修飾器 或 元素和修飾器 的間隔，以中划線 - 來作為 塊|元素|修飾器 名稱中多個單詞的間隔

保證各個部分只有一級 B__E_M  ，修飾器需要和對應的塊或元素一起使用，避免單獨使用

<!-- 某個塊 -->
<form class="search-form">
    <!-- 某個元素 -->
    <div class="search-form__content-left">
        <!-- 錯誤：不能出現多個元素 -->
        <h2 class="search-form__content-left__h2">標題</h2>
        <!-- 某個元素，雖然是子集，保證了只有一級元素 -->
        <input class="search-form__input">
        <!-- 某個元素，加上了hover修飾器 -->
        <button class="search-form__button search-form__button_hover">搜索</button>
        <button class="search-form__button-set search-form__button-set_hover">搜索1</button>
        <!-- 錯誤：不能單獨使用lg修飾器 -->
        <button class="search-form__button_lg">搜索</button>
         
        <!-- 塊中可嵌套着另一個塊 -->
        <p class="my-img">
            <img class="my-img__logo" src="abc.png" alt="image" title="image">
        </p>
         
    </div>
</form>
 
<div class="search-result"></div>

在樣式文件中，僅以類名作為選擇器，不使用ID或標簽名來約束選擇器，且CSS（或者SCSS編譯后的CSS）中的選擇器嵌套不超過2層，增加效率和復用性，減少選擇器之間的耦合度

比較常見的嵌套情景：需要通過塊狀態對內部元素進行調整時

.search-form {
    position: relative;
}
 
.search-form__input {
    font-size: 12px;
}
 
.search-form__button_hover {}
 
/* 避免：避免使用不必要的嵌套（此處只是簡單的嵌套，沒有必要） */
.search-form__content-left .search-form__input {}
 
/* 稍好的嵌套（此處是在塊的theme1修飾器下的子元素，某些時候有必要） */
.search-form_theme1 .search-form__input {}
 
/* 錯誤：使用了標簽 */
button.search-form__button {}
.search-form button {}

而在SASS文件中，也需要注意嵌套層次的意義，盡量按照 BEM三層來

/* 避免這樣做 .search 不是一個獨立的塊 */
.search {
    /* 應該把這個塊提取出來 */
    &-form {
        &__button {
            &_hover {}
             
            /* 應該把這個元素提取出來 */
            &-set {
                &_hover {}
            }
        }  
    }
 
    &-result {
         
    }
}
 
/* 建議這樣,按照各級區分出來 */
.search-form {
    &__button {
        &_hover {}
    }
     
    &_button-set {
        &_hover {}
    }
}
 
.search-result {
 
}
 
 
/* 對於嵌套在塊中的塊，如果非常有必要，可以嵌套寫樣式 */
.search-form {
    .my-img {
        &__logo {}
    }
}
/* 但一般來說，不建議，因為這破壞了塊的獨立性。可轉換成設置對應的 元素來表現，如 */
.search-form {}
.my-img {
    &__search-form-logo {}
}

BEM 規范雖然結構比較清晰，但有時候會產生代碼冗余。

為避免寫太多重復性的代碼，我們要學會善於利用預編譯語言的（適當地使用 @include @extend 等）