CSS設計の教科書をまとめてみた
CSS設計の教科書を読んで、今後意識していくべき項目を大雑把にまとめてみました。
もっと知りたいという方は本の購入をオススメします。
よりよいCSSの設計とは
予測しやすい
期待通りに振る舞い、追加したルールが他のルールに影響を与えない。再利用しやすい
抽象的で分離され、再度遭遇した同じUIに対して、再度書き直す必要がない。保守しやすい
新しいルールを追加・更新するときに既存のルールのリファクタリングを必要としない。拡張しやすい
自分と自分以外の人にもメンテナンス・管理がしやすい。
破綻しやすいCSSの特徴
- HTML構造に依存している
- スタイルを取り消している
- 絶対値を多様しいている
コンポーネント設計についての概要も記載されており、とても分かりやすく丁寧にまとまっていました。OOCSSとかSMACSSとかBEMとか聞いたことあるけど、、、という方は必見。
コンポーネント設計の概要について
OOCSS
SMACSS
下記のようにカテゴライズして設計する。
Base
ブラウザ、およびそのプロジェクトに置ける、各要素のデフォルトのスタイルを定義。htmlやbodyに定義するであろう、全体の背景やフォント、リンク色といったものも含む。なるべく書き換えはしたくないため、widthやmargin、padding等は記載しない。Layout
IDを用いて定義されるようなヘッダー、フッター、サイドバー、コンテンツエリア、構成の大枠、セクションを作る要素へのルール。これらはIDで詳細度をあげてもOK。Module
ボタン、見出し、リンクなど、layoutを除くあらゆる再利用可能なオブジェクトが該当。State
JSの制御で切り替わるような状態を表すものやメディアクエリでコンポーネントを制御するものが該当。.is-*という接頭辞をつけるのが推奨。Stateでは!importantを使うのは許容。Theme
テーマを切り替えるようなもの。.them-*という接頭辞をつけるのが推奨。
BEM
オブジェクト/コンポーネントを3つに分けて分類する。
例:
<div class="alert alert_waring>
<h1 class="alert__title">パスワードが違います。</h1>
<p class="alert__body">再度入力してください。</p>
</div>
Block
例の.alertが該当。Element、Modifierはこれを基点に命名していく。Element
Blockを構成する要素。alertというBlockに対するElementということでアンスコを2つ付けた命名にする。.alert__title、.alert__bodyが該当。Modifier
BlockまたはElementのバリエーション違いの要素。SMACSSのStateのようなものも該当。上記では、.alert_waringが該当し、Modifierはアンスコ1つつけて命名する。
コンポーネント設計時の注意点
最適化を焦らない
Rule of three。3回繰り返したものは、パターンとして成立する。無駄に詳細度をあげない
h2.title {...} → .title {...}
セレクタとしては要素を省略しても問題無いし、h2でなくともh1やh3でも使用できるようにするべき。構造という責任と見た目という責任の分離 テキストカラーやサイズやボーダーや背景といった見た目とpositionやfloatなどといった構造を一緒のルールセットにしないこと。
開放/閉鎖の原則
コンポーネントのベースとなるルールというのは、上書き・拡張しやすく(開放的) できる限り変更をするべきではない(閉鎖的)再利用がすべてではない コンポーネントにおける再利用性というのは、コンポーネントの単位で再利用するということ。 過剰に再利用することを意識して、異なるコンポーネントを混ぜないように。
さらに設計やリファクタリングを学びたい人には下記がオススメらしい。
