CSS設計完全ガイド
~詳細解説+実践的モジュール集

書籍の概要

この本の概要

CSS設計は多くの現場で導入されていますが,いまだに悩みがつきません。プロジェクトの大小や性質によって最適解も変わってきます。
そこで本書は,CSSのさまざまな設計手法を紹介しつつ,考え方や実践のポイントを明確化します。そのうえでボタン,ラベル,カード,テーブル…といったウェブの定番的なモジュールを網羅的に取り上げ,さらにはそれらの組み合わせ方まで,実践的なコードを紹介します。
代表的な設計手法である「BEM」と,著者が開発した設計手法「PRECSS」によって対比的な解説を加えており,思考をなぞることで最適解が炙り出されることでしょう。
駆け出しのウェブ開発者,フロントエンドエンジニアの方に,ぜひ読んでいただきたい1冊です。

こんな方におすすめ

  • CSS設計の知識を吸収し,フロントエンドエンジニアにステップアップしたいひと
  • 向上心が強く,CSS設計について理解を深めたい初級フロントエンドエンジニア
  • 会社としてCSSのルールを策定したいチームリーダー等の責任者

目次

Chapter 1 CSSの歴史と問題点

  • 1-1 CSSの始まり
    • CSSの役割と目的
  • 1-2 CSSの問題点
    • 「カオス」になるCSS
  • CSSはすべてがグローバルスコープ
  • 1-3 複雑化するWeb開発
    • 変更不可能なHTML/CSSと付き合う
    • 増加するページ数
    • 頻繁に変更される「状態」
  • 1-4 解決策として生まれたCSS設計
  • 1-5 CSS設計とデザインシステムとの連携

Chapter 2 CSS設計の基本と実践

  • 2-1 【CSS設計の前に】CSSの基本 詳細度とセレクター
    • セレクターの種類と,本書における呼称
    • カスケーディングの基礎
    • 詳細度の基礎
  • 2-2 【CSS設計の前に】リセットCSS
    • ブラウザのデフォルトスタイル
    • ハードリセット系CSS
    • ノーマライズ系CSS
    • リセットCSSはCSS設計にどのような影響を及ぼすか?
  • 2-3 【CSS設計の前に】英単語を結合する方式の名前
  • 2-4 よいCSS設計が目指す4つのゴール
    • 予測できる
    • 再利用できる
    • 保守できる
    • 拡張できる
  • 2-5 CSS設計の実践と8つのポイント
    • 1. 特性に応じてCSSを分類する
    • 2. HTMLとスタイリングが疎結合である
    • 3. 影響範囲がみだりに広すぎない
    • 4. 特定のコンテキストにみだりに依存していない
    • 5. 詳細度がみだりに高くない
    • 6. クラス名から影響範囲が想像できる
    • 7. クラス名から見た目・機能・役割が想像できる
    • 8. 拡張しやすい
  • 2-6 モジュールの粒度を考える
    • 改めてモジュールとは
    • モジュールの粒度のばらつきが引き起こす問題
    • モジュール粒度の指針
  • 2-7 CSS設計の必要性

Chapter 3 さまざまな設計手法

  • 3-1 本Chapterの前提
  • 3-2 OOCSS
    • ストラクチャーとスキンの分離
    • コンテナとコンテンツの分離
    • OOCSSのまとめ
  • 3-3 SMACSS
    • ベースルール
    • レイアウトルール
    • モジュールルール
    • ステートルール
    • テーマルール
    • SMACSSのまとめ
  • 3-4 BEM
    • BEMの基本
    • Blockの基本
    • Elementの基本
    • Modifierの基本
    • Blockのネスト
    • Mix
    • Mixでは対処できない場合
    • Modifier名は省略してはいけない
    • BEMのその他の命名規則
    • BEMのまとめ
  • 3-5 PRECSS
    • 基本的な指針
    • ベースグループ
    • レイアウトグループ
    • モジュールグループ
    • ヘルパーグループ
    • ユニークグループ
    • プログラムグループ
    • オリジナルグループ
    • PRECSSのまとめ

Chapter 4 レイアウトの設計

  • 4-1 Chapter 4~Chapter 7のコードの前提
    • 使用するリセットCSS
    • 独自に定義したベーススタイル
    • 使用する設計手法
  • 4-2 本Chapterで扱うサンプル
  • 4-3 ヘッダー
    • ①.header__inner / .ly_header_innerに対するスタイリング
  • 4-4 フッター
    • ①ボーダーの実装方法の違い
    • ヘッダーの内側とフッターの内側のスタイリングは共通化すべきか?
  • 4-5 コンテンツエリア
    • 1カラム設計
    • 2カラム設計

Chapter 5 CSS設計モジュール集① 最小モジュール

  • 5-1 本Chapter以降のモジュール集の進め方
    • 拡張パターンについて
    • バリエーションについて
    • BEMとPRECSSの差違について
  • 5-2 最小モジュールの定義
  • 5-3 ボタン
    • 基本形
    • 拡張パターン
    • バリエーション
  • 5-4 アイコン付き小ボタン
    • 基本形
    • 拡張パターン
  • 5-5 アイコン
    • 基本形
    • 拡張パターン
    • バリエーション
  • 5-6 ラベル
    • 基本形
    • 拡張パターン
    • バリエーション
  • 5-7 見出し
    • 基本形
    • バリエーション
  • 5-8 注釈
    • 基本形
    • バリエーション

Chapter 6 CSS設計モジュール集② 複合モジュール

  • 6-1 複合モジュールの定義
  • 6-2 メディア
    • 基本形
    • 拡張パターン
    • バリエーション
  • 6-3 カード
    • 基本形
    • 拡張パターン
  • 6-4 テーブル(水平)
    • 基本形
    • 拡張パターン
  • 6-5 テーブル(垂直)
    • 基本形
  • 6-6 テーブル(交差)
    • 基本形
  • 6-7 ページャー
    • 基本形
  • 6-8 タブナビゲーション
    • 基本形
  • 6-9 CTA
    • 基本形
  • 6-10 料金表
    • 基本形
    • バリエーション
  • 6-11 FAQ
    • 基本形
  • 6-12 アコーディオン
    • 基本形
  • 6-13 ジャンボトロン
    • 基本形
  • 6-14 ポストリスト
    • 基本形
  • 6-15 順序なしリスト
    • 基本形
    • 拡張パターン
    • バリエーション
  • 6-16 順序ありリスト
    • 基本形
    • バリエーション

Chapter 7 CSS設計モジュール集③ モジュールの再利用

  • 7-1 最小モジュールを利用した複合モジュールの作成
    • 水平ボタンリスト
  • 7-2 最小モジュールと複合モジュールの組み合わせ
    • ボタン + 画像半分サイズメディア
    • ボタン + CTAエリア
    • ラベル + ポストリスト
  • 7-3 複合モジュール同士の組み合わせ
    • FAQ + リスト
    • アコーディオン + カード + CTAエリア

Chapter 8 CSS設計をより活かすためのスタイルガイド

  • 8-1 スタイルガイドとは
  • 8-2 なぜスタイルガイドが必要か?
  • 8-3 スタイルガイドを作成する
    • スタイルガイドジェネレーターを使用する
    • 手動で作成する
  • 8-4 スタイルガイドを作成する方針のまとめ

Chapter 9 CSS開発に役立つその他の技術

  • 9-1 CSS開発を効率化する,ミスを減らす
    • Sass
    • Browsersync
    • Autoprefixer
  • 9-2 人による差異をなくす
    • CSScomb
    • EditorConfig
    • Prettier
  • 9-3 リファクタリングのヒントを得る
    • Stylelint
    • CSS Stats
  • 9-4 CSSを軽量化する
    • CSS MQPacker
    • cssnano
  • 9-5 HTML開発を効率化する
    • Nunjucks
    • EJS
    • Pug
  • 9-6 開発にまつわるタスクを自動処理する
    • Prepros
    • Gulp
    • webpack

著者プロフィール

半田惇志(はんだあつし)

株式会社24-7/テクニカルディレクター・株式会社パンセ/シニアエンジニア。
主に受託制作のフロントエンドの開発から業務全体のワークフロー設計・改善,マーケティングオートメーション,コンテンツ制作まで幅広く業務を行う。特に強い専門領域はHubSpot CMSとCSS設計。好きな言葉は人間万事塞翁が馬。

著作物 : Webのための次世代エディタ Bracketsの教科書(Kindle版のみ取り扱い)
PRECSS(http://precss.io/ja/)
ブログ :Thinking Salad
Twitter :@assialiholic