CSS における設計とは を読んで
CSS における設計とは を読んで
Chapter 1 CSS における設計とは を読んだときのメモです。
はじめに
壊れない完璧な設計を求めるのではなく、壊れたときに勇気を持って修復できる設計を
まったく手を入れる必要がない CSS を書くというのは不可能
- メンテナンス効率を下げない設計
- 少ない工数で改修ができるようにするための設計
良い設計の CSS
予測しやすい
- 期待通りに振る舞うか
- 他のルールに影響しない、影響を与えない
再利用しやすい
- 抽象的で機能ごとに分離されている
保守しやすい
- ルールを追加・更新するときに、既存のルールのリファクタリングを必要としない
拡張しやすい
- サイトの規模が大きく複雑になるにつれて、拡張しやすいようになっているか
CSS
宣言型の言語
文字色を red にする場合
- セレクタ:
text - プロパティ:
color - 値: red
.text {
color: red;
}
基本的なフォーマット
.selector {
property: value;
}
class を使ったマークアップにする
HTML の構造が変わったときに、CSS 側は基本的に変更する必要がなくなるため
定義したルールを取り消すのではなく、追加していく
border は、別 class に切り出すなど
絶対値を多用しない
例: line-height
px(単位あり)ではなく相対値(単位なし)で指定する- フォントサイズが変わっても、同じ倍率を保つ
- 子要素に継承するため、同じ値を指定する必要がない
- フォントサイズに対する倍率で行送りが計算される？
修正しやすい CSS を書く
問題発生時に、勇気を持ってコードに手を入れられることができるか
変更があっても容易に改修ができるような設計
入れ替えができるようにするための基本設計
- 要素を部品(モジュール、コンポーネント)と考える
