献本を頂きました
同じ会社ということもあり、普段からお世話になっている著者の谷さんより献本を頂きました。ありがとうございます。 普段からCSSやWeb Componentsで登壇されていることもあり、安心と信頼の内容でした。
以下、大まかな内容の構成と感想文です。
まずはインプレス様のサイトより目次より引用：
第1章 CSSにおける設計とは 1-1 CSS設計の重要性 フロントエンドとCSSの仕事 開発に欠かせない設計 より良いCSSのゴール 1-2 破綻しやすいCSS HTMLの構造に依存している スタイルを取り消している 絶対値を多用している 修正しやすいCSSへ モダンなサイト構築ワークフロー
第2章 CSSの基本を振り返る 2-1 CSSセレクタと詳細度 カスケーディングの基本 詳細度 詳細度の計算 2-2 セレクタのリファクタリング セレクタをより安全でシンプルなものに 要素セレクタを省略する セレクタを短くする セレクタを限定的にする クラスセレクタを活用する
第3章 コンポーネント設計のアイデア 3-1 CSSにおけるコンポーネント設計 コンポーネントとは 3-2 OOCSS OOCSSの原則 構造と見た目の分離 コンテナーとコンテンツを分離 3-3 SMACSS カテゴライズ 命名規則 3-4 BEM MindBEMding 3-5 MCSS マルチレイヤーCSS MCSSのレイヤー 3-6 FLOCSS 自分の設計手法を考える FLOCSSの構成 基本原則 Foundation Layout Object 命名規則 カスケーディング
第4章 コンポーネント設計の実践 4-1 コンポーネントをどのように作るか 最適化を焦らない Rule of three SOLID CSS 4-2 よくあるコンポーネントの設計・実装パターン ボタン アイコン 見出し メディア ナビゲーション リスト グリッド 汎用クラス
第5章 CSSプリプロセッサを用いた設計と管理 5-1 コンポーネントを個別に管理する Sassを使った管理方法 マルチクラスとシングルクラス セマンティックなクラス名 Sassの注意点
第6章 コンポーネントの運用に必要なツール 6-1 コンポーネントの運用 CSSのコメント ドキュメンテーション スタイルガイド、パターンライブラリ 6-2 スタイルガイドの作成方法 スタイルガイドのテンプレート スタイルガイドジェネレータ ワークフローを見直す CSS開発・設計に役立つツール
第7章 Web Componentsの可能性 7-1 HTML/CSSのコンポーネント化 現状のHTML/CSSにおける限界 Web Componentsとは Web Componentsの仕様 7-2 独自のコンポーネントを作る モデルとなるコンポーネント my-alert要素を作る ライフサイクルコールバック TemplatesとShadow DOM 機能追加とスタイリング コンポーネント開発の時代に備えて
テクニック本ではなく、「設計」に徹している本
CSSの書籍といえば、こういう表現をするにはこういうテクニックがあるよというHow to本が多いと思いますが、 この書籍は毛色が違います。いや、そもそも本のタイトルがそうなのですが、冒頭にそれが凝縮されています：
壊れない設計を求めるのではなく、壊れた時に勇気を持って修復できる設計を
至言ですね。
CSSの変遷から考えると
数年前、私がマークアップエンジニアだった頃、CSSはとても貧弱で、デザイナーさんの出すカンプを表現するにはあれこれハックのようなものが必要で、時にはバッドノウハウを使わざるを得なかった時もありました。 それから数年、CSSの表現力は格段に上がったと思います。CSS3を使えば大抵の表現は可能ですし、アニメーションまでできてしまいます。Webサイトに求められる要求に応えられるようになってきたと思います。
が、それと共にCSSは複雑化、肥大化し続け、今度は別の問題が出てきているようにも思います。実際、私が今の会社に入った時は、「CSSはこんなに複雑なのかよ」と思ったほどです。Sassも使ったことなかったですしね…。</p>設計思想の登場
この書籍ではOOCSS/SMACSS/BEMといったCSSの設計手法についても詳しく解説されています。いかに肥大化するCSSを管理するか、互いに疎結合なコンポーネント設計を行うか、といったポイントにフォーカスあたっており、 WebサイトからSPAのようなWebページにもひと通り当てはまると思います。私はこの辺りは用語くらいしか知らなかったので、改めて勉強になりました。 また、コンポーネント設計に合わせて細かいテクニックについても解説があります。至れりつくせり。
CSSプリプロセッサ、その他ツールについて
Sassについて触れられていますが、やはりSassは設計を基に構造化を実現するためのツールであり、Sassを使っている = メンテナブルというわけではないですね。 プログラマブルな機構を設けることで管理はしやすくなりますが、銀の弾丸ではない、と。私も「うはー、セレクタネストできて超便利じゃん」と思ってバシバシ書いてました反省。 まぁ、この辺りも上述のようなコードの複雑化・肥大化を助けるためのツールなので、設計は先にちゃんとしておかないといけないですよね。
そしてStyleStats/AutoPrefixer/Gruntといった自動化と検証ツール。この辺りはどんどん使っていきたいです。</p>そしてWeb Componentsへ
最後にWeb Componentsにページが割かれています。個人的には、Web Componentsの恩恵を一番受けられるのはCSSだと思っているので、この辺りは抑えておくべきポイントだと思います。 とはいえ、周りにやってる人がいるので私は静観している状態ですが。ぱっと見た感じ、JavaScriptもいくらか書けないといけないようなので、今のうちに勉強しておかないといけないですね。
まとめ
通しで読んだ感想として、「運用を想定した考え方」をひと通り学べる書籍だと思いました。特に後々からのCSSのリファクタリングは困難で、高度なスキルが必要なようにも思えます。 そういったコストを見越して、設計段階からちゃんとやりましょう、という感じですね。
普段はフロントエンドとして関わる上で、JavaScript側に倒した運用設計を頑張っていますが、CSS側も避けては通れない道がありました。むしろこっちのほうが辛そう…。
200ページ程度に内容がギッシリ詰まっていて、それでいて読みやすくなっています。また、近年のCSSを取り巻く環境とプラクティスが満載です。
CSSのメンテナンスに困っている方、また設計に関するバイブルとして手元に置いておくのが良いではないでしょうか。
現場からは以上です。</p>