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を基本として作られていることが多い

考え方
・共通化できるクラスはまとめる
・拡張クラスで別パターンの見栄えを追加
・パーツは使いまわしできるようにする
・クラス名から影響範囲が予測可能に
・状態を管理する