2023.11.02

CSS

CSSの命名規則のBEM(ベム)について

BEM(ベム)とは Block(親要素) Element(子要素) Modifier(修飾)の略で、CSSを設計・命名規則です。
命名: Block__Element–Modifier

例えば下記の通りです。

まずはBlockについて

<form class="form"></form>

ここではformタグに「form」というclassを付けました。

次はBlockにElementの追加について

<form class="form">
    <input class="form__input">
    <button class="form__button">regist</button>
</form>

inputタグとbuttonタグにはformに付けられたclass名に「__」を加え、「input」を加えた「form__input」と「button」を加えた「form__button」というclass名が付けられています。

最後はBlock__ElementにModifierの追加について

<form class="form">
    <input class="form__input">
    <button class="form__button form__button--disabled">regist</button>
</form>

buttonタグにはformに付けられたclass名に「–」を加え、「button」を加えた「form__button–disabled」というclassが付けられています。