BEM樣式使用規范

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

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

官方地址

點擊查看

在選擇器中，由以下三種符號來表示擴展的關系：

• -中划線 ：僅作為連字符使用，表示某個塊或者某個子元素的多單詞之間的連接記號

  • type-block__element--modifier

• __ 雙下划線：雙下划線用來連接塊和塊的子元素

  • block__element

• -- 雙中划線: 雙中划線用來連接塊和塊的修飾狀態或者塊的子元素和塊的子元素的修飾狀態

  • block--modifier block__element--modifier

參考案例

<!-- 某個塊 -->
<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>

 .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 {}

常見問題匯總

BEM中常見問題及如何避免