# BEM

> Block__Element--Modifier

## 命名規範

.block {} // 塊
.block__element {} // 元素
.block--modifier {} // 修飾符

* B（block）：某一塊展示/功能區域，例如：.nav。
* E（element）：這塊展示/功能區裡的某個元素，例如: .nav__item。
* M（modifier）：某個元素或某個區塊的狀態，例如：.nav--hide, .nav__item--active 等。

### 範例

<nav class="nav">
  <a href="#" class="nav__item nav__item--active">當前狀態</a>
  <a href="#" class="nav__item nav__item--hover">hover 狀態</a>
  <a href="#" class="nav__item nav__item--normal">正常狀態</a>
</nav>

.nav {
  &__item {
    &--active {
    }
    &--hover {
    }
    &--normal {
    }
  }
}

## 使用規則

:::info
BEM 命名和 DOM 沒有很嚴格的關係，所以無論子元素的嵌套程度有多深都沒有關係。命名約定只是用來幫助你辨識子元素和父層元件的關係
:::

:::danger
避免多個元素級的命名 ~~Block__Element__Element--Modifier~~
:::

:-1: bad example

<div class="c-card">

    <div class="c-card__header">
        <!-- Here comes the grandchild… -->
        <h2 class="c-card__header__title">Title text here</h2>
    </div>

    <div class="c-card__body">

        <img class="c-card__body__img" src="some-img.png" alt="description">
        <p class="c-card__body__text">Lorem ipsum dolor sit amet, consectetur</p>
        <p class="c-card__body__text">Adipiscing elit.
            <a href="/somelink.html" class="c-card__body__text__link">Pellentesque amet</a>
        </p>

    </div>
</div> 

:+1: good example

<div class="c-card">
    <div class="c-card__header">
        <h2 class="c-card__title">Title text here</h2>
    </div>

    <div class="c-card__body">

        <img class="c-card__img" src="some-img.png" alt="description">
        <p class="c-card__text">Lorem ipsum dolor sit amet, consectetur</p>
        <p class="c-card__text">Adipiscing elit.
            <a href="/somelink.html" class="c-card__link">Pellentesque amet</a>
        </p>

    </div>
</div> 

## 命名空間與元件 BEM 的搭配使用

### 範例

<ul class="l-grid">
    <li class="l-grid__item">
        <div class="c-card">
            <div class="c-card__header">
                […]
            </div>
            <div class="c-card__body">
                […]
            </div>
        </div>
    </li>
    <li class="l-grid__item">
        <div class="c-card">
            <div class="c-card__header">
                […]
            </div>
            <div class="c-card__body">
                […]
            </div>
        </div>
    </li>
    <li class="l-grid__item">
        <div class="c-card">
            <div class="c-card__header">
                […]
            </div>
            <div class="c-card__body">
                […]
            </div>
        </div>
    </li>
    <li class="l-grid__item">
        <div class="c-card">
            <div class="c-card__header">
                […]
            </div>
            <div class="c-card__body">
                […]
            </div>
        </div>
    </li>
</ul> 

## 參考資料

* [GitHub - chris-pearce/css-guidelines: Sensible CSS Guidelines for large scale projects 🚀](https://github.com/chris-pearce/css-guidelines?tab=readme-ov-file#bem-like-naming)
* [GitHub - zhaotoday/bem: CSS 命名规范 - BEM 的使用。](https://github.com/zhaotoday/bem?tab=readme-ov-file)
* [和BEM的战斗：10个常见问题及如何避免](https://segmentfault.com/a/1190000006135647)