CSS設計完全ガイドを読んでCSS設計完全に理解した

カオスになりがちなCSSのコーディングをなんとかしたいと言うことで手に取ってみた。

単体のHTMLタグにスタイルを当てない方がいいとか、ID要素にスタイルを当てると使いまわしがしにくくなるとか、親子関係を深くしすぎるとやっぱり使いまわしがしにくくなるとか、経験則的なノウハウはある程度知っていたものの、そういったものを体系的にまとめたCSSの設計手法がかなり前から広まっているとは知らなかった。

この本はそういったCSS設計手法（CSS Methodology）の解説と実践を学べる本。

CSS設計を身に着ければHTMLの構造もいいかんじに整理できる。
どの設計手法を用いても実際のコーディングにおいてはやはりある程度手探りになる。一から自分で考えずにある程度まとまった規範を足掛かりにできるのは助かる。

ざっくりとした内容紹介

Chapter1では「CSSの歴史と問題点」と題してCSS設計の生まれた経緯を。
デザインシステム構築の方法論であるAtomicDesignを紹介し、CSS設計に必要な抽象化の考え方に触れる。

Chapter2ではCSS設計の基本要素、リセットCSSの種類、4つのゴール、8つのポイント、モジュール粒度などを扱う。
どんなCSS設計手法を使うにせよ基礎となる考え方を知ることができる。

Chapter3では代表的なCSS設計手法について個別に開発する。
OOCSS、SMACSS、BEM、PRECSSなど。それぞれの歴史的経緯や背景も分かるのでどれを使うべきかの判断もしやすい。

Chapter4～7ではBEMとPRECSSによってページのレイアウトやHTMLのパーツであるモジュールを実際にコーディングしていく。
ここは写経するとよさげである。

Chapter8ではスタイルガイドの重要性と作り方。
明日の自分は他人なので他人同士のコミュニケーションのために作っておいた方がいい。

Chapter9ではCSS開発に役立つツールの紹介。
詳細な解説ではないので実際に使用するには別途調べながら行う必要があるが、どんなツールがあるのか分かるだけでも参考になる。

得られた学び

CSSの役割を意識

• ベース: ページの全体に共通するフォントや背景色
• レイアウト: 要素の幅と高さ、マージンとパディングなどの位置に関するスタイル
• モジュール: 再利用可能なスタイリングされたHTMLのパーツ

言われてみればというかんじだけどスッキリした。複数の役割のスタイリングをひとつのCSS定義内で混ぜないことが肝要。

実際どうやって書いて行くか

この本の中では予測できる、再利用できる、保守できる、拡張できるという4つのゴールに向かって、8つのポイントが挙げられているわけだけど、自己流にまとめると以下のようなかんじ。

• 影響範囲を分かりやすく、またできるだけ狭くして変更が適用される箇所を予測できるようにする
• 再利用しやすく保守しやすくために要素型セレクタ（単体のHTMLタグ）、属性セレクタ、IDセレクタなどは利用を避け親子関係もなるべく作らないようにする。クラスセレクターが基本。
• 影響範囲を示すにも見た目や役割を分かりやすくするにもクラスの名前が重要
• マルチクラスやモディファイアーなどで拡張しやすく

8つのポイントは慣れるまで暗記しておくといいかなと思う。8つのポイントが何かというのは買うと書いてあると思います。
いや、マジでいい本なので。ハハハ。

CSS設計手法を意識してCSSを書いて行けば割とやりやすいはず。

どのCSS設計手法を使ってみようか

紹介されているCSS設計手法の中ではBEMが割ととっつきやすそうかなと思った。
ブロック、エレメント、モディファイアー。

実際にちょっとコーディングしてみているが今のところ違和感はない。
親子関係を持たないなどシンプルでリファクタリングもしやすい。

まだMixとかよく分かってないけど。

やっていきます。