Web制作者のためのCSS設計の教科書 ー の読書感想文
Posted: Updated:
CSS設計の秘伝書
Web制作者のためのCSS設計の教科書
だって忙しかったんですもの・・・
目玉は何と言っても「CSS設計」にフォーカスした希少本であること
Webサイト制作者のた（中略）サイト実践講座
というのも特に最近（じゃないものもありますが）では、雨後の筍の如くCSS設計のメソドロジーが生えてきていて、キャッチアップが追いつけてなかったフシがありました。
- OOCSS
- SMACSS
- BEM
- MCSS
- FLOCSS
本書では、上記のCSS設計パターンについて詳しく説明しています。ちょうど時系列に沿った形で振り返ることができて勉強になりました。
具体的なコンポーネント設計の例も必見
大枠の設計パターンだけでなく、たとえばボタンであったりメディアカードであったりグリッドであったり、個々のコンポーネントについても具体的な例で解説されています。
多くの人がCSSを書きながらモヤモヤと気をつけているようなポイントを、しっかりと体系的に整理して説明してくれています。「なんかうまくいかない」という普段の課題も、本書の説明でスッキリするところが多いのではないでしょうか。
なんか思ったこと
以下、本書の内容ではなく、読みながら思った自分の未解決疑問系。
- 予測しやすいとは？ 規則性があるだけでなく、明示と暗黙の境界はどうなるのか？
- 例えばこんな感じか？
- 意図して遵守すべき規約が少ない
- 暗黙の規約が複雑でない
- 例外がない（または限りなく少ない）
- 設計パターンは何を明文化したら、他のメンバーに伝わるものになるの？
- 分類
- 命名規則
- カスケーディングのルール（何をやってよく、何をやってはいけないか）
- CSS設計パターンが備えるもの
- 取り回しやすく、わかりやすい分類
- いざというときに、カスケーディングの例外をセレクタ的に閉じ込める（スコープを限定する）手段
- クラス名が長いとき、HTML側のコードの見通しを担保するフォーマットは何かあるのかしら
- 昨今のattributesを有効に使おう風潮と、class名の肥大化からして解決すべき問題。まあ、属性で適宜改行すればいいんだけど。
- あるクラスの内部実装やAPIをしらなければ使えない、といった面倒臭さが、スタイルにおいてはインスペクタで逐次確認できるせいもあってかやわらいでる？
意識して守るべき規約が多いと人は容易に死ぬという問題と、スコーピングのない記述言語たるCSSの設計パターンは、正面から殴り合ってる感じがしてこわい。徳の高い分野だ。
むすび
次回、CSSをスクラッチすることがあったら、まずは本書を読み直しながら書いてみたいと思います。谷さん焼き肉おごってください＾q＾
