BEM × Sassでメンテナンス性の高いコードを書こう!

こんにちは、すずです(´ω`)

BEMとは?

BEM(ベム)とは、「Block(かたまり)・Element(要素)・Modifier(修飾)」の頭文字をとったもので、class名の命名ルールの1つです。

BEMの書き方

次に、BEMの書き方についてご紹介します。
class名を以下のように命名します。

[aside type=”boader”]
class=”block__element–-modifier”
[/aside]

ポイント①:blockとelementはアンダーバー2つで区切る

[aside type=”boader”]
class=”header__button”
[/aside]

ポイント②:elementとmodifierはハイフン2つで区切る

[aside type=”boader”]
class=”button–-large”
[/aside]

  • ハイフンとアンダースコアは2つ
  • block, element, modifierが複数単語になる場合、単語と単語の間はハイフン1つで区切る
  • ハイフン1つの場合はElementとModifierの区切りではなく、ただの単語の区切りとして使用

BEMのサンプルコード

具体的な例を見てみましょう。
BEM記法でclass名をつけると、以下のようなコードになります。

<section class="about">
  <h2 class="about__title">タイトル</h2>
  <p class="about__text">テキストテキストテキスト</p>
  <button class="about__button about__button--more">MORE</a>
</section>

ポイント①:

タイトルとURLをコピーしました