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

 

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

[voice icon=”https://suzublog.site/wp-content/uploads/2020/01/nayamu_girl2-2-e1579170514839.png” name=”プログラミング初心者” type=”l”]どんなクラス名を付けたらいいのかよく分からない。
命名を考えすぎて作業が進まない。
一体どんなクラス名を付ければいいのかな・・・?[/voice]

 

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

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

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

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

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

BEMのおさらい

[box class=”pink_box” title=”BEMとは”]

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

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

*Element → 要素
 block__element, header__title, Main__category

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

[/box]

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

[box class=”green_box” title=”BEMの命名規則”]

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

[/box]

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

 

 

コメント

タイトルとURLをコピーしました