CSSの基本から理解を深め一つ上のスキルを身につける、他書とはひと味もふた味も異なるオススメの本 -CSS設計の教科書

その場限りのCSSを使うのではなく、CSSの基本からしっかりと理解を深め、運用期間が長くても安心して使えるCSS、大規模なサイトでも管理できるCSSを身につけたい人に役立つ一冊を紹介します。

単にコードを書くだけではなく、設計・管理・運用を考えた『ちゃんとしたCSS』が徹底的に解説された良書です。

GoogleエンジニアのPhilip Walton氏によると、より良いCSSのゴールとして次の4つのポイントが重要です。

• 予測しやすい

  記述したスタイルが他のスタイルに影響されず、期待通りの見栄えになる。

• 再利用しやすい

  スタイルの定義が機能ごとに管理されており、似たUIの別のプロジェクトにも利用できる。

  保守しやすい

  スタイルを追加・修正した際に、既存のものに影響を与えない。

  拡張しやすい

  サイトの規模が大きく複雑になっても、対応できる。

参考：CSS Architecture（翻訳版）

これはCSSに限らず他の設計、プログラミング言語などにも言えることで、CSSにおいてこれらのことをどのように実践すればよいのか、本書で紐解かれています。

AmazonではKindle版のCSS設計の教科書も扱ってます。お値段はかなりお得！

そんな本書の中身を紙面のキャプチャで少しだけご紹介。

第1章は「CSSにおける設計とは」。
Webデザインの世界では情報設計やUI設計からはじまり、フロントエンドでもJavaScriptの設計やこのCSSの設計が非常に重要な工程です。プロジェクトの初期から携わるのであれば後任が困らないコードを、運用から携わるのであればメンテナンスにつれてひどくならないコードを書くように、明日の自分、1ヵ月後の自分、1年後の自分が困らないような設計を意識します。

メンテナンス効率を下げず、少ない工程で作業ができるCSSとは？　やはり具体的な例がないと分かりにくいですよね。「破綻しやすいCSS」のサンプルを多数掲載し、どこが原因でどのように手を加えればよいのか的確なアドバイスが充実しています。

第2章は「CSSの基本を振り返る」。
CSSの設計を考える上で大切なのは、CSSの基本であるセレクタと詳細度です。CSSが破綻してしまう原因の一つは、セレクタが複雑になってしまい管理しきれなくなってしまうことです。また、コンポーネントの設計をする上でも重要なポイントになるため復習を兼ねてしっかりと確認しておきましょう。

第3章ではCSSのコンポーネント設計に関するさまざまなアイデアを見ながら、コンポーネント自体とその考え方から、メンテナンス性が高く再利用性も高いCSSを学びます。

アイデアはOOCSS（オブジェクト指向CSS）をはじめ全部で5つ掲載されており、それぞれの概要だけなく、コードをベースに詳しい解説が行われています。

命名規則やスタイルの上書きを防止するための強固な詳細度の使い方など、実装の経験を元に生まれたアイデアなので、非常に参考になるものばかりです。

第4章からは、いよいよ実践です。

コンポーネント設計のアイデアを元に、実際にどのように設計をし、コンポーネントを作成していくかを学びます。

最初は多くのプロジェクトでよく利用するパターンをコンポーネント化していきます。

ボタン、見出し、アイコン、画像とテキストなど、それぞれどういう条件のスタイルが必要とされ、どのような拡張性を考慮し実装していくのか、詳しいコード解説とともに学びます。

スタイルシートのテクニック的な面も多く掲載されているので、非常に参考になります。

グリッドのコンポーネント設計もプロジェクトに応じて、多くの方法が考えられます。

最後は「汎用クラス」の定義。マージンをちょっとつけたい、フォントサイズを大きくしたい、カラーを変えたいなど、ユーティリティもしっかり設計しないと破綻の原因となってしまいます。

第5章はCSSプリプロセッサを用いた設計と管理の方法で、Sassを使ってのCSSファイルの管理方法です。

第6章ではコンポーネントの運用に役立つ便利なツールの紹介。CSSのコードの検証や記述の統一化、コードの最適化・軽量化、一貫したルールで運用するためのスタイルガイドなど。

CSS設計の教科書の目次

1. CSSにおける設計とは

   CSS設計の重要性

   破綻しやすいCSS

2. CSSの基本を振り返る

   CSSセレクタと詳細度

   セレクタのリファクタリング

3. コンポーネント設計のアイデア

   CSSにおけるコンポーネント設計

   OOCSS (オブジェクト指向CSS)

   SMACSS (スマックス)

   BEM (ベム)

   MCSS (マルチレイヤーCSS)

   FLOCSS (フロックス)

4. コンポーネント設計の実践

   コンポーネントをどのように作るか

   よくあるコンポーネントの設計・実装パターン

5. CSSプリプロセッサを用いた設計と管理

   コンポーネントを個別に管理する

6. コンポーネントの運用に必要なツール

   コンポーネントの運用

   スタイルガイドの作成方法

7. Web Componentsの可能性

   HTML/CSSのコンポーネント化

   独自のコンポーネントを作る

CSS初心者用の解説は一切ありません、実務で既にCSSを使用しており、一つ上のスキルを身につけたい人にオススメしたい本です。

献本の御礼

最後に、献本いただいたインプレスジャパンの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス