toge's diary

コンピュータ関連の趣味をつらつらと。

「CSS完全設計ガイド」はとても丁寧に作られた良本でした

去年発売された本ですが、今さら読みました。 gihyo.jp

読んだ動機

私はフロントエンド、特にデザイン周りはからっきしです。
フロントエンドやるときはJavascriptのチューニングばっかりなので、HTML+CSSは最低限知っている程度のレベルです。

WebスクレイピングをしているとCSSクラスの指定が結構複雑で「何かベストプラクティスがあるんだろうなぁ」と思っていまいた。
そこらへんの知識をちょっと除き見して、あわよくばスクレイピングで利用したかったのです。

感想

HTML + CSSをかじったことのある程度の私にはちょうど良い本でした。
とても丁寧に作られている本だと思ったので、本来の対象読者であるHTML+CSS書く人以外でもお勧めだと思います。

500ページ以上ある大作ですが、HTML+CSSのコードが大量に掲載されているためなので、そんなに重くなく読み進めることができます。
かといって「HTML+CSSのコードが貼りまくられてページ数水増ししている本」にならないように、「意味が伝わる必要最低限のコード」を筆者が気を配って用意しているのを強く感じます。
この方針が破綻なく最後まで続くので、ほんと凄いなぁと思いました。

おおざっぱな中身の紹介

導入部分ではCSS設計の重要性を話した上で、Atomic Designの紹介を経てOOCSS,SMACSS, BEM, PRECSSの紹介と続きます。

その後、BEM, PRECSSでの具体的なコンポーネントの設計・実装例に移ります。
この話の流れも自然ですっと理解できました。

  • レイアウトと装飾のクラスは分けて指定する
  • Modifier, Mixinのクラス名はスコープを明示する

とかは確かにスクレイピングで見るHTMLで見かける内容だなぁと追体験できました。

設計を原理主義として話すだけではなく、冗長になる部分や設計の境界を迷う部分についても解説されているのも納得感が高かったです。

後半部分でコンポーネントを組み合わせて複雑なレイアウトを実現する際に、CSSの再利用を多用していく部分なんかは自分で書けたらなかなか気持ち良さそうに思いました。
設計の重要性を感じとれる瞬間ですね。

最後にツールの紹介もされているので、CSS設計についてなんとなく全体を俯瞰できた感じがします。
恥ずかしながら、CSS MQ Packerを安易に適用すると駄目なこととか、スタイルガイドという言葉自体初めて知りました。

まとめ

最初にも書きましたが、とても丁寧に作られた本だなぁと思いました。

普通のプログラミングとは異なりかなり制約がきつい世界なのですが、様々な人の知見で設計手法が作り出され、再利用性が確立されているのを知れただけでも良かったです。