CSS設計の教科書
「Web制作者のためのCSS設計の教科書」という本を頂いたので、今週いっぱいかけて読んでました。
目次や書籍の情報については以下からご確認ください。
CSSは言語の設計上、とても崩壊しやすいものになっています。
なぜなら、この言語にはスコープやカプセル化の概念が無いため、1つのスタイルが予期せず周りに影響を与えてしまうからです。
このCSSの崩壊を食い止めるために、昨年は日本でも様々なCSSのコンポーネント設計のアプローチが話題になりました。OOCSS, SMACSS, BEM, MCSS ... 、今年はこれらの手法を組み合わせた「FLOCSS」も出てきましたね。
本書ではこれらのCSS設計の手法が出てきた背景の説明から入り、次に各アプローチが横断的に解説されています。そして、覚えた手法を実践でどのように使ったら良いのかを、よく作られるであろうボタンやナビゲーションの具体例を元に解説されています。
また、後半では、SassなどのCSSプリプロッサを用いた設計方法や、コンポーネントの運用に役立つツールの紹介がされています。これらはコンポーネントの運用を行っていく上で必要になってくるでしょう。
最後には、今話題のWeb Componentsの仕様とサンプルコードが掲載されているので、是非試してみましょう。
僕は今回この本をきっかけにして、はじめてWeb Componentsを触ってみました。今までのHTML, CSSの書き方と異なる部分も多く、結局サンプルコードを落として確認しながら書きましたが... 。まだまだ仕様が理解できたとは言えませんが、これから少しずつWeb Componentsを触っていこうと思います。
この本は、これからCSSのコンポーネント設計を始める人にとっては各手法のルールとその使い方を理解するのに最適な本になっています。また、既にコンポーネント化を意識してCSSを書いている人にとっては、他の人（この本の著者）がそれぞれのシーンでどのようなアプローチを取っているかを見て取ることができ、参考にすることができると思います。
他、読書メモ
読みながらメモを取っていたので、それを書き残しておきます。
border: noneやpadding: 0のようなスタイルの打ち消しを行なうものが頻出してきたら、それはコードをリファクタするタイミングかもしれない- クラスセレクタ、属性セレクタ、擬似クラスの詳細度は同等である
- 擬似要素は、上記のクラスセレクタなどよりも詳細度は低い
- 重要なのはセレクタを短くすることで特定の要素への依存を減らして可搬性を高めることであり、必ずしもCSSセレクタをマークアップの構造に従って書く必要はない（例えばHTMLの構造が
ul li aでも、CSSでのセレクタ指定はul aで良い） - 属性セレクタを使用することで、IDセレクタをクラスセレクタと同等の詳細度に抑えることができる（属性セレクタでの指定:
[id="header"] { ... }） - すべてのコンポーネントをプロジェクトの初期段階で作ろうとするのではなく、3回似たようなパターンが出てきたときにコンポーネント化を考える
- もしもCSS設計の手法に則ってコードをすべて書き直す必要が出てきたときは、まずはカテゴリー分けから始めるなど、一つ一つ進めていく
- ボタンなどは幅や高さが使われる場所によってバラバラになるので、こういった場合はボタンコンポーネントに幅を持たせることを諦め、各ブロック（フッターやコメント欄等の各コンポーネント）でサイズを指定する
- 画像が左で文章が右のような配置の
.media__imageというコンポーネントがあったとして、これらの配置を反転するときは.media__image--reverseのようにModifierを作る - シングルクラスを使用すればHTMLがシンプルに、マルチクラスを使用すればCSSがシンプルになりやすい
- コンポーネント化を行なうには、デザイン段階からフロントエンド開発者とデザイナーが関わっているのが理想
- FLOCSSでのObjectのProjectレイヤーのように、プロジェクト固有のパターンは必要になってくると思う
