【初級編DAY23】CSS設計の基本概念からクラスの付け方をイメージしよう
一通りCSSについて学んできましたが、CSSを書くにあたり効率的かつ管理しやすい形でCSSを作りたいですよね！
そのためにはどうしたら良いか？についてここでは学んでいきましょう。
CSS設計について
CSSには色々な書き方が有ります。それを効率的かつ管理しやすい形となるよう先人が体系化して共有してくれていたりします。それをCSS設計と呼んでいます。
以下よりそのCSS設計の重要な考え方を学んでいきます。
OOCSSについて
Object Oriented CSSの略。オブジェクトの指向。再利用でき無駄がないclassを設計する事。
「構造」と「見た目」の分離
■基本思想■
例
.btnでボタンの構造を指定
.btn-primaryや.btn-dangerなどで「見た目」を足す
まずは.btnでボタンの共通構造をCSSで設定し、その後見栄えだけを上書きの形で設定するためのcssを設定する。
HTMLで.btn と .btn-primaryを設定することで構造を保ちつつ、見栄えの身をその都度変更することでclassの再利用が可能となる。
メリット
- 共通部分クラスを作成することでコードの重複を防ぐ
- コード量を減らすことが出来る
- 共通化することで再利用の幅が増える
- 変更も簡単にできるクラスを作ることが出来る
「コンテナー」と「コンテンツ」の分離
■基本思想■
「コンテナー」と「コンテンツ」の分離してCSSを設計すること。特定のコンテナーに依存せず、使いまわしできるパーツ（コンテンツ）を用意すること。
※コンテナーとは：親（もしくは祖先）要素
例
.box内の.titleに対して
✖ .box .title {・・・
.box .list {・・・
〇 .title {・・・
.list {・・・
こうすることでbox以外の別のコンテナー要素となった時も使いまわしが可能となる。
メリット
- 要素に依存しない
- 使回しが可能
上記のことを踏まえると、SassでSCCを記述する際に注意が必要。
Sassでの記述の注意
例
.box {
.title {
/* ・・・ */
}
.list {
/* ・・・ */
}
}
⇒【CSS】「.box .title {・・」「.box .list {・・」
Sassで入れ子を使用し記述をすることでCSSでは「.box .title {・・」「.box .list {・・」と要素に依存する形で変換される。
そのため、Sassの入れ子を使う際はコンテナー（親要素や祖先要素）に依存しすぎていないかを注意して使う。
BEMについて【命名規則】
クラス名から影響範囲が分かりやすくするため、クラス名を付ける際のルール。
■BEMとは■
Block、Element、Modifierの略。CSS設計でおそらく一番有名。Blockは「使いまわしできる」パーツにあたる。
※OOCSSのコンテンツに近いが、BEMの場合は子要素も合わせて1パーツと捉えることが基本。
≪ざっくりとした考え方≫
Block
子要素を含めた1パーツ。使いまわしのできるパーツ。
Element
子要素に指定したクラス。
Modifier
Elementの見栄えを拡張するためのクラス。
Blockで指定したクラスに対して、子孫要素（Element）をアンダーバー2つ（__）で繋いでクラス名を決めていく。それから、見栄えを拡張するクラスとしてハイフン2つでクラスを加えることで見栄えを追加する考え方。
例
①Block
.card
②Element
.title .description .button などの子要素を指定。アンダーバー2つでつなぐ
- .card__title{・・・
- .card__description{・・・
- .card__button{・・・
③Modifier
先ほどの子要素に対し、見栄えの設定を追加するためのクラス。ハイフン2つでつなぐ。
- .card__button--primary { ・・・
- .card__button--secondary { ・・・
OOCSSの構造と見栄えの関係に似ているね！
クラス名を継ぎ足していくので、クラス名が長くなる傾向にあるが、下記のようなメリットがある。
メリット
- 影響範囲が予測しやすい
- 使いまわししやすい
アンダーバー2つで書かれていたら、BEMがベースになっているんだな、と捉えよう！
補足
ちなみにBEMにおけるハイフン（-）
単語の区切りを表す。
例）news-section__title → ニュースセクションのタイトル
参考サイト
SMACSSについて
■SMACSSとは■
ステート。状況を管理するためのクラスのつけ方。
「.is-active」など、条件に応じてクラス名を付与することで要素の状態を管理できる。
JavaSprictやjQueryで「要素をクリックしたときに〇〇をする」といった処理ができるようになる。
例
あるbuttonに対して
通常 .btn
クリック時 .btn.is-active
このように要素の状態に対してクラス名を付与する
命名規則としては、「is-」を接頭辞として先頭につけて、後ろに状態を表す言葉を付けるような形となる。
Sassでの記述のポイント
上記のように状態に対する見栄えの変化をする際は、通常の要素に紐づく形で指定することが多い。Sassだと＆を使用する。
例
.btn {
&.is-active {
/* .is-activeの状態の時の見栄え */
}
/* クラスと違いますが状態を表すもの */
&:hover {
/* マウスホバーした時の見栄え */
}
&:focus {
/* 要素がフォーカスされた時の見栄え */
}
}
このように記述をすることで、「.btn.is-active{・・・」というＣＳＳを設定することが可能。
Sassについての復習
まとめ
- 共通化クラスはまとめる
- 拡張クラスで見栄えの追加
- パーツは使いまわしできるように
- 影響範囲が予測可能なクラス名を設定
- 状態を管理クラス名の設定
様々なCSS設計がありますが、基本的にはOOCSSとBEMを押さえておけばOKです！
他の人から見ても、分かり易く編集がしやすいＣＳＳ設計を目指して学んでいきましょう♫
今日はここまで٩( ''ω'' )وお疲れ様でした。
