SassやCompassを使っていて、最近あまりCSSを直接書くという機会は減りましたが、CSSを書くという目的自体は変わらない！ということで、CSSの書き方云々ではなく、設計についての書籍が出たということでKindle版を購入してみました。

と、いうわけで、発売日に斜め読みした感想をまとめてみました。

 

やっぱり設計ですよね

「ヒャッホー！これCSSだけで実装できたぜー！」みたいな脳汁あふれるCSSコーディングは確かに楽しいのですが、やっぱり設計がきちんとしていないとですね・・・。という問題は様々な場所で出てくるかと思います。

似たような記述が散見されたり、わけがわからないおかげで後々の更新で「!important」を乱発する羽目になったり・・・。

せめて自分でコーディングする場合だけでも綺麗にしておきたいのです。

 

本書におけるCSS設計の目的

  • 予測しやすい
  • 再利用しやすい
  • 保守しやすい
  • 拡張しやすい

の4つを目的として、CSSを書くために、どうすればいいかということが軸になっています。

わかりやすい方法論を通して、ウォーターフォール型ではなく、アジャイル型のWEBサイト構築のワークフローになりつつある中で、どんな設計をすれば良いのか、ということを提案しているのです。

 

プログラミングと違ってスコープが存在しないCSSを、どう書くか

基本的には、より安全でシンプルなセレクタを用いて、コンポーネント設計を行い、既存のCSSフレームワークから学ぶものは踏襲しつつ、運用フェーズまで考えた上で書く。

ざっとまとめるとこんな感じです。

最終的には、SASSなどのCSSプリプロセッサ言語を使ったイマドキな開発での開発と運用、Web Componentsの可能性として、

  • Templates
  • Custom Elements
  • Shadow DOM
  • HTML Imports

を利用したマークアップ方法まで解説されています。

 

綺麗で読みやすいコードは、CSSに限らず永遠のテーマですよね

DRY（Don’t Repeat Yourself）なコードとか言われても、ピンとこない人。

制作フェーズより、運用フェーズで泣かされている人。

ただただCSSを綺麗に書きたい人。（綺麗の基準は人それぞれですが・・・）

こんな感じの人にはおすすめできる内容だと思います。

CSSの小手先のテクニックなどが載っているわけではないので、こんなことができれば！！！というよりも、ワークフローを考えるディレクション担当者（というかプレイングマネージャー的な立場の人）が読むべき本かなあという気がしました。

Sassもmixinとextend地獄に陥りがちな人が、安易にBootstrapのテーマなどにいかず、スクラッチでもCSSを綺麗に書けるためのコツが決して多くないページ数にきっちりまとまっていました。

お陰で、次のプロジェクトからもう少し綺麗に書けそうな気がする・・・。