「CSS設計完全ガイド」を読みました
この本を読む目的
最近よくCSSを壊してしまう
柔軟なCSSの設計とは何か今一度勉強しなおしたい。
Chapter1 CSSの歴史と問題点
CSSはグローバルスコープ。
さらに近年複雑化するWeb開発でCSSの管理がますます複雑になっている。
Chapter2 CSS設計の基本と実践
CSS設計には色々な手法があるが、どの設計でも共通するお話をこの章でする。
よいCSS設計が目指す4つのゴール
予測できる
再利用できる
保守できる
拡張できる
よいCSS設計を実現するための8つのポイント
詳細度とセレクター
リセットCSS
命名規則
CSS設計のポイント
特性(ベース、レイアウト、モジュール)に応じてCSSを分ける
html要素に直接スタイリングしない
CSSのスコープは絞る
他の箇所に書いて動かなくなるようなCSSをみだりに書かない
詳細度をみだりに高くしない
詳細度は以下で決まる
1. IDセレクター
2. クラスセレクター、属性セレクター、擬似クラス
3. 要素型セレクター
クラス名から影響範囲を想像できる名前にする
クラス名から見た目、機能、役割を想像できるようにする
拡張しやすいように作る
Chapter3 さまざまな設計手法
OOCSS(オーオーシーエスエス)
様々な設計手法のベース
SMACSS(スマックス)
規則緩め
BEM
Block, Element, Modifier
めっちゃ規則多い
PRECSS
筆者が開発した設計手法
全てのクラス名に役割に応じた2文字の接頭辞をつけるのが特徴
OOCSS, SMACSS, BEMのいいところを取り入れた
Chapter4 レイアウトの設計
実践的なコードを用いて、レイアウトの設計方法を紹介。
レイアウトの基本は「色分けできているかどうか」
Chapter5 最小モジュール
この章では、ボタン、アイコン付きボタン、アイコン、ラベル、見出し、注釈のモジュール設計についてみていきます。
文字サイズが変更になったときや、文字の長さが変更になったとき、アイコンが変わったとき…などよくある変更に強いモジュールの設計について書かれていて、とても参考になりました。
Chapter6 CSS設計モジュール集 複合モジュール
この章では、メディア、カード、テーブル(水平、垂直、交差)、ページャー、タブナビゲーション、CTA、料金表、FAQ、アコーディオン、ジャンボトロン、ポストリスト、順序なしリストのモジュール集をみていきます。
「下のカードだけ余白を消したい」など、今までなんとなくで対応していた細部の設計まで「こうすればよかったのか！」がたくさん書かれていました。 これをみてゴルフメドレーもリファクタリングしていきたいと思います。
Chapter 7 CSS設計モジュール集③ モジュールの再利用
水平ボタンリスト
ボタン+画像半分サイズメディア
ボタン+CTAエリア
ラベル + ポストリスト
FAQ + リスト
アコーディオン + カード + CTAエリア
モジュール同士の組み合わせについて解説。
Chapter 8 CSS設計をより活かすためのスタイルガイド
スタイルガイドの紹介。
筆者はelementフォルダを作ってその中に入れている。
Chapter 9 CSS開発に役立つその他の技術
CSSの開発に役立つライブラリの紹介。
感想
LP開発やメディア開発を受注する際によく遭遇するCSSのお悩みは、こちらの本1冊で大抵は解決すると思いました。例えばどこにおいても綺麗に横並びになるとか、どこにおいても余白が綺麗とか、気をつけないと本当に適当なコードになってしまいますからね。。
一方で、CSS Modulesやstyled-componentsといったReactなどで使われるスタイルを管理するライブラリは、本書とは別で勉強する必要がありそうです。
この本で、CSS設計手法のベース、それぞれの思想がわかったので、それらを基にライブラリの思想を読み解いて、勉強していきたいと思います。