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が付けられています。