37.CSS設計の考え方 ～ルールに則って書く～
本日はCSSの設計について学習しました。
CSSの書き方やクラスのつけ方等の「道しるべ」的なものを先人たちが体系化し、共有してくれています。
これをCSS設計と呼んでいるそうです。
この考え方を押さえておくことで、良いCSSを作ることができるそうです。
では早速やっていきましょう。
OOCSSという思想
Object Oriented CSSの略で、「構造」と「見た目」の分離が基本思想です。
CSSのクラスで「構造」と「見た目」に分けてCSSを作成する例を見てみましょう。
今回はボタン要素に対して、CSSのクラスを使って構造と見た目を分けて定義します。
構造と見た目の関係
ここでいう「構造」は「ひな形」と言い換えてもいいかもしれません。
構造用の.btnクラスと、見た目用の.btn-red、.btn-buleクラスを作って確認します。
.btnクラスに書くのは
displayや、ボーダー、padding等、要素を新しく追加しても大体同じになる部分を予め書いておきます。
まずは要素に.btnクラスのスタイルを適用して「初期設定状態」のボタンを作成する。
次に、「見た目」を初期設定状態のボタンに対して適用します。
.btn-redや.btn-blueクラスに書くのは
背景色、文字色などのボタン個別で設定するようなデザイン部分です。
.btnクラスを作成せずに、.btn-blueと.btn-redで書いていくと同じスタイルを2回書かないといけない場面が多くなるはずです。
ですので、構造部分やデフォルト設定は.btnクラスに集約することで同じスタイルを書くことも減りますし、新しいクラスを追加するのも容易になります。
コンテナとコンテンツの分離
コンテナーとコンテンツは、ざっくりいうと箱と中身の関係ですね。
これを分けて考えるということなんですが、
逆にわかれてないものをどうやって書くの？と思いました。
クラスの入れ子状態になってしまうと、箱に依存してしまうCSSになるということです。
例えば、セレクタの書き方を
.box .test{ }
のようにすると、.boxクラス内の.testクラスに限定されてしまい
.testクラスの内容が.boxクラスの存在に依存している状態になってしまいます。
例えば、
<div class="box">
<div class="test"></div>
</div>
<div class="text-box">
<div class="test"></div>
</div>
このようなHTMLがあった時に先ほどのCSSだと上のboxクラスの中のtestクラスのみにスタイルが適用されて、下のブロックにはtestクラスのスタイルが適用されないのです。
ちなみに、この問題はSassの入れ子を考えなしに多用していると発生しやすいようです。
クラスをわけて、.btn{}、.test{}とわけておくことで、変更や追加にも強くなれますね。
命名規則という意思疎通
命名規則に従うだけで、クラスの影響範囲を見るだけで伝えることができます。
CSSのクラス命名規則にはBEM(Block、Element、Modifierの頭文字)があります。
簡単にいえば、ぱっと見で構造がわかるようにクラス名を
.Block__Element--Modifier
のようなルールでつけようね。
１つず見ていきましょう。
Blockは使いまわしできるパーツ単位の名前
大体divタグで囲まれるような塊ですね。
この塊の名前をBlockの部分のクラス名にします。
ElementはBlockを構成する要素の名前
例えばdivブロックの中に入っているhタグにtitleクラスをつけるような感覚です。
Modifierは見栄えのバリエーション部分につけます。
Bootstrapでいうところのprimaryとかdangerとかがこれに近いですね。
単語の区切りはハイフン(-)を使います。header__nav-itemみたいな書き方です。
状態管理の「ステート」
状態を管理するためのクラス名のつけ方の１つで、
「.is-active」のようなクラス名を条件に応じて
付与することで要素の状態を管理することができます。
これは昨日復習したjQueryの出番ですね。
$(".test").click(function(){
$(this).addClass("is-active");
});
こんな感じでクリックされた要素にis-activeクラスが追加されるようにできます。
こうした「状態」に関するクラスはSassの&で書くことが多いそうです。
言われてみれば、hoverとか&::hoverで書きますよね。
今日のまとめ
- 共通部分をまとめ、個別のスタイルを少なく書くと管理がしやすい
- クラス名のつけ方でスタイルの影響範囲が伝わりやすい
- 状態を管理するには、「状態」をクラス名に入れて、追加削除すると良い
今日はCSS設計の考え方について学習しました。
どの考え方も大事ですが、後から自分が見たときに見やすいCSSを書くためにも
では、また。
