たまにはwebの知識をアップデートするか、と思った。 bootstrapあたりから先はあまり理解してないので、その辺をちゃんとやっていくか、と。
で、CSS系のフレームワークを学ぶにあたり、まずはCSSの設計などの基礎から始めよう、と思った。

そんな背景をtwitterで知り合った若者に伝えたらこの本を勧められたので読む。

CSSの基本を理解している事はある程度前提とした内容となってる。例えばセレクタや、overflowとかfloatとかが何なのか、などはある程度は知っているという前提で書かれている。

ただ、全部をちゃんと理解してる、という程では無く、うろ覚えな事が多少あるくらいでも読めるようには配慮されている。

それらを前提に、CSSのクラスなどをどうモジュラーに設計していくか、という本。

3章

今三章に入った所だが、微妙にカプセル化の定義が間違えている気がする。カプセル化は複数の物を一つにして、一つとして受け渡しできる事で、ADTや情報隠蔽とは関係ない概念だろう。
まぁその辺の話にもう関わりたいとは思わないが…

OOCSSという概念、というかガイドラインが導入された。構造と見た目の分離、として何種類かのalertの例が出て来るが、いまいち何が構造なのかが分からない。

アラートメッセージとしての基本的な体裁を構造と言っているが、それもまさに見た目では無いのか？

昔もhtmlとCSSでも文章の構造と見た目の分離、みたいな話はあったが、それとは別の話なのかなぁ。

ただ、DRY的な意味でこの分離をすべきなのはそんな原則が無くても明らかなので、やってる事が正しいのは分かるが。
良く分からないのでもう少し読み進めて見よう。

SMACSSというガイドラインが出てきたが、これ、原典読むんじゃ駄目だったのかな？なんとなくそっちの方が早い気がするのだが。
この本の方が良く書けているのかなぁ。

さすがにもうIE6対応の話はいいんじゃないか^^;

3.4 BEM

SMACSSのあたりでは原典をあたればいいんじゃないか、と思ったが、BEMが登場したあたりから、個々をあまり掘り下げないで必要な事がさらっとまとまってる本書には意義がある、と思うようになった。

自分はデザイナという訳じゃないので、そんなに深く理解してる必要は無くて、各ガイドラインの基本的な原則だけを一通り押さえておく方が重要だ。この本はそういう目的に便利に使えるように書かれている。

この後にもその他のガイドラインが出てくるが、それらを眺める事でCSSのコンポーネント設計の基本と実際のパターンみたいなのを、一歩引いた目線で見られるようになり、新しいコンベンションで書かれた物に触れる時にも素早く適応出来るようになる。

なかなか良い本だな。

4章、実践編

4章では実際にここまで紹介したガイドラインを踏まえて、実際に良くあるコンポーネントを実装（というのか？CSSを書く事）してみる、という内容。

自分はCSSを書きたいと思ってる訳では無いので、例えばtwitter っぽい画面の実現方法などに興味は無いので、本当に単なる例として見ている。

そんな自分でも、この4章の実際のCSSを見てみると「なるほど、実際はこんな感じか」というのが分かってなかなか参考になる。

5章とsass

5章はCSSプリプロセッサとの事で、とりあえず http://sass-lang.com/guide くらいは読んでから本書は読んでね、と書いてあったので、先にこのguideを読む。

SassとSCSSというのが併記されてるが、説明はSCSSの方でされてるなぁ。見た所シンタックスが違う程度なので説明と揃えてSCSSの方を見るか。

importが展開される、とあるが、場合によってはキャッシュで共有される方が良い場合もあると思うのだけど、なんかこのimport文、素のCSSの奴と区別点かなくね？
拡張子見てよきにはからってくれるのかなぁ。

一通り読んだ。なんかあんまり「これは良い！」ってエキサイトする感じじゃないが、別に知識として仕入れておくだけで使う訳じゃないからまぁいいか。

では本文に戻ろう。

6章、運用に必要なツール

Javadocみたいな奴とかCSS Lintとかの話。こんなツールもあるのか、へー、と眺める程度だが、いろいろと筆者が使っているであろう物を紹介してくれているので、実際の開発がどんなかがそこから少し感じ取れて、見た目ほど蛇足な章でも無いな、と思った。
ただやはり眺める程度やね。

7章、web componentsの話とか

カプセル化の説明が間違えている所で、それを使われてShadow DOMの説明をされるので、Shadow DOMとはなんなのかがさっぱり分からない。

以前実装者にこの辺の話を聞いた記憶があるがあんまり覚えてないので、ググってMDNのShadow DOMの説明を読む。
なるほど、DOMとCSSのカプセル化を実現する為に、切り離されたDOMのような物を提供するのか。

個人的には今後のwebにこの手の技術が要るかは良く分からん。まぁ意外とwebは消えきらないので、知っておくと使う日も来るのかもしれんが。

ついでにHTML Importsを見る。おぉ、これがomo先生の作ってたHTML Importsって奴か〜。

そしてライフサイクルコールバックのhtc感。なんかhtcの残党が仕様にかんでるとか言ってたしなぁ、そういえば。

それにしてもAppleもこんな仕様に同意したというのはちょっと意外だなぁ。彼らはこういうリクエストが増えそうなのとか嫌いそうなもんだが。
さすがにSafariで動かない物を皆が次世代標準として話題にするとも思えんので彼らも実装したのだろうけれど。誰かが説得頑張ったのだろうね。

全体の感想

最後まで読み終わったので全体の感想とか。

もともとBootstrapあたりからあまりweb の技術にキャッチアップしてなかった自分としては、このCSSをコンポーネントとして設計する為のガイドラインをいろいろ見たり、そこの根底に流れる原理原則を見たり、それらを踏まえた実際を見てみる、というのは、良い導入になっていると思った。

個々の話題はそんなに深く扱っている訳でも無いが、どれもそんなに複雑な物じゃないので、この位さらっと紹介してあれば十分な事も多い。
また、そうした物をたくさん紹介する事で、現在（というよりは少し前くらいか）のwebのフロントエンドの空気感のような物を知る事が出来て、なかなか良い本だった。

Jekyllのminimaのドキュメントを見るとsassとかの話題があって「なんだろ？これ」とか思ってたので、ちょうど良い感じにいろいろかじれたのは良かった。

最近のフレームワークとかを見る前に、まずはこの本で準備体操しておくのは悪くないと思った。

CSS自身はそれなりに知っている必要があるので、入門者向けというよりは、リハビリ向けに思う。
HTML4とかDynamicHTMLの時代をそれなりにちゃんとやってて、その後しばらくwebのフロントエンドから離れてた人が昨今のトレンドをまた追ってみよう、と思った時の最初に読む本として良い気がする。

デザイナが読むのにどうか、とかは自分はデザイナじゃないので良くわからない。上の話はあくまでプログラマが読むという前提での話。

なお、自分はKindle版を読んだが、なんか誤植が多い。別に分かるからいいんだけど。