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