DAY29.Sass学習編 CSS設計の基本概念
01.クラスの付け方
クラスの付け方をCSS設計から考えていく
CSSには色んな書き方ができる
「こうした方がいい感じにCSS作れる」考え方を
先人が体系化して共有してくれていたりする
これを一般的にはCSS設計と呼ぶ
CSS設計の考え方を押さえておくことで、
効率的かつ管理しやすい形でCSSを作ってくことができる
CSS設計には色んな型がある
現時点では考え方だけ押さえておいてもらえたら大丈夫
02.重要な考え方その①
1.共通化する部分は共通パーツとして定義
OOCSS(オーオーシーエスエス)
Object Oriented CSSの略
CSS設計の基本思想である「構造」と「見た目」の分離
Bootstrapの設計思想に取り入れられている
Bootstrapの書き方をイメージしてもらうと分かりやすい
Bootstrapのボタンを見る
.btnという「構造」を指定した上で、
.btn-primaryや.btn-dangerなどで「見た目」を足している
.btnという共通クラスを用意しておくことで、
共通部分でのコードの重複がなくなり、
コード量を減らしてCSSをコーディングできる
実際のコーディングに落とし込むと
共通化できるところは共通クラスとして持っておく
共通化したクラスとして定義することで、コード量も少なくなり、
変更も簡単なクラスを作ることができるようになる
2.ポイント
・通化できるところは共通クラスとして持っておく
・共通クラスに足りない部分を追加クラスで足していく
03.重要な考え方その②
1.「コンテナー」と「コンテンツ」の分離
特定のコンテナーに依存しないようにCSSを書く
コンテナーとは親(もしくは祖先)要素と捉える
「依存しない」を言い換えると
「使いまわし」できるパーツ(コンテンツ)を用意する
特定の要素やクラスに依存していると、別の場所で使うことが難しくなる
使い回し可能なパーツを用意しておくこと
「使いまわしできる」という考え方もCSSでクラスを作る上では非常に重要
Sassの入れ子を使う際は、コンテナー(親要素や祖先要素)に
依存しすぎていないかを注意して使う
2.ポイント
・特定のクラスに依存しないように注意
・Sassの入れ子を使う際はコンテナー依存にならないように注意
04.重要な考え方その③
1.クラス名から影響範囲が分かる
BEMというCSS設計の命名規則を使う
クラス名から影響範囲が分かりやすくなる
命名規則
「こういったルールでクラス名を付ける」
というクラス名を付ける際のルール
BEM
Block、Element、Modifierの頭文字をとったCSS設計
Blockは「使いまわしできる」パーツ
BEMの場合は子要素も合わせて1パーツと捉えることが基本
Blockで指定したクラスに対して、
子孫要素をアンダーバー2つ(__)で繋いでクラス名を決める
子孫要素に指定したクラスがElement
Blockを構成する要素としてElementがあり、
BlockやElementの見栄えを拡張するクラスとしてModifierが存在
クラス名を継ぎ足していくので、クラス名が長くなる傾向
「影響範囲が予測しやすく」「使いまわししやすい」CSS
アンダーバー2つで書かれていたら、BEMがベースになっている
BEMにおけるハイフン(-)は単語の区切り
2.ポイント
・クラス名から影響範囲や役割が理解できる
・親子階層を意識して名前を決めると最初は決めやすいかも
04.重要な考え方その④
1.状態を管理する
SMACSSと呼ばれるCSS設計手法の中に「ステート」がある
状態を管理するためのクラスの付け方
クラス名を条件に応じて付与してあげることで
要素の状態を管理することができる
JavaScriptやjQueryを使えば、「要素をクリックしたときに〇〇をする」
といった処理ができるようになる
命名規則
「is-」を接頭辞として先頭につけて、
後ろに状態を表す言葉を付けるような形
基準となるクラスに対して状態によって見栄えを変える
状態はSassの「&」で繋ぐことが多い
2.ポイント
・状態を使って要素に対する変化時の見栄えを管理する
・Sassを使う場合は「&」を使うと管理しやすいかも
05.まとめ
他にもたくさんのCSS設計がある
基本的にはOOCSSとBEMを基本として作られていることが多い
考え方
・共通化できるクラスはまとめる
・拡張クラスで別パターンの見栄えを追加
・パーツは使いまわしできるようにする
・クラス名から影響範囲が予測可能に
・状態を管理する
この記事が気に入ったらサポートをしてみませんか?