「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設計手法のベース、それぞれの思想がわかったので、それらを基にライブラリの思想を読み解いて、勉強していきたいと思います。