# 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 を書く

問題発生時に、勇気を持ってコードに手を入れられることができるか

# 変更があっても容易に改修ができるような設計

入れ替えができるようにするための基本設計

  • 要素を部品(モジュール、コンポーネント)と考える

# 参考🔗