HTMLのクラス名を好き勝手書いてしまうと、共同での開発で修正しづらいという問題が起きてしまいます。
そこで、後から改修しやすい設計にする手法の一つであるBEMについて解説していきます。
BEMとは
Block, Element, Modifierの頭文字をとってBEMという名前になっています。
BEMの書き方
Block, Elementはアンダースコア二つでつなぎます。
Element, Modifierはハイフン二つでつなぎます。
例:
qiita.css
/*Block*/
.list
/*Block, Element*/
.list__item
/*Block, Element, Modifier*/
.list__item--second
...少し慣れは必要そうです！
Block, Element, Modifierの違いについて
Block: ナビゲーションだとフォームなどの部品やヘッダー、フッターなどの大きなセクションのこと
Element: その部品を構成するための中身のこと
Modifier: 同じブロックではあるけれど、他とは状態や見た目が異なる場合に用いる。（例えば、クリックできるボタン、クリックできないボタンで他と異なるクラス名をつけるような時、Modifierを記述する。）
BEMのルール
Modifierがあるクラス名とないクラス名は両方記述します。
→CSSの記述が長くなり、修正しづらくなることを防ぐため。
単語はハイフン一つをつなげて記述します。(size-bigなど)
Sassを使うと便利！
無駄な記述を無くすことができます。
qiita.sass
.block {
&__element {
&--modifier {
}
}
&__element-2 {
&--modifier {
}
}
}
最後に
ルールを定めることで誰が見てもわかりやすくなることは、パフォーマンスの向上にもつながり大変便利だと感じました。
今後、意識していきたいと思っています。
最後まで記事を読んでいただきありがとうございます。今後もフロントエンドをメインにアウトプットをしていきたいと思っているのでよろしくお願い致します。