こんにちは、すずです(´ω`)
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>