【CSS設計】BEMを利用しつつスッキリとしたclass名のつけ方を考えた

 

こんにちは、すず(@suzublog23)です。

プログラミング初心者
どんなクラス名を付けたらいいのかよく分からない。
命名を考えすぎて作業が進まない。
一体どんなクラス名を付ければいいのかな・・・?

 

今回はこのようなお悩みを解決します。

プログラミング初心者の方は特に、classの命名規則にこだわりすぎて「作業が全然進まない・・・」なんてことがあるかと。私自身、本当にたくさん悩みました。

今回は、BEMを利用しつつスッキリとしたclass名のつけ方をご紹介します。早速ご覧ください。

【CSS設計】スッキリとしたclass名のつけ方

結論、「BEMのメリットを取り入れて、デメリットを省いて書く」です。これだと分かりにくいので具体的に解説します。

BEMのおさらい

BEMとは

Block(ブロック)、Element(エレメント)、Modifier(モディファイア)の略語。

*Block → かたまり
 block, header, footer, content-header, Main 

*Element → 要素
 block__element, header__title, Main__category

*Modifier → 状態や変化 を表すもの
 block__element block__element-state

次に、BEMの命名規則がこちら。

BEMの命名規則

Block、Element、Modifierは全てkebab-caseで書く。
Block~Element間は__でつなげる。
Block~Modifier間、Element~Modifier間は_でつなげる。
Modifierは状態の名前と値をセットにして-でつなげる。

ソースを書くとこんな感じ。