こんにちは、すず(@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]
ソースを書くとこんな感じ。
コメント