CSS設計に関する書籍を斜め読み

March 14, 2023

その辺を学習としている同僚に手元にあったWeb制作者のためのCSS設計の教科書は2014年に出版された書籍(9年前)をすすめるのはアレかと思ったのと自分のCSS苦手を克服するため書籍を漁ってみた。

以下斜め読みした順のレビュー

CSSは普通に読み書きできるけど、CSSにおいて堅牢な設計ができるようになりたい人(自分)がターゲット。

1冊目|CSS設計完全ガイド ~詳細解説+実践的モジュール集 – 2020/2/27

3冊の中から1冊選ぶなら多分これ。概念的な説明ではまとめがありサンプルコードが読みやすい。

CSS設計完全ガイド サンプルデータサイト (css-architecture-perfect.guide) もある。

CSS設計完全ガイド ~詳細解説+実践的モジュール集

2冊目|現場のプロから学ぶ CSSコーディングバイブル – 2021/8/27

1冊目と同じ和書として比較してしまうと内容が被っているのと、フルカラーなところが逆に読みにくい。

【特典PDF付き】現場のプロから学ぶ CSSコーディングバイブル

3冊目|Every Layout-モジュラーなレスポンシブデザインを実現するCSS設計論 – 2021/11/23

もう1冊選ぶならこれ。いわゆるCSS設計手法のOOCSS、BEM、SAMCSS、FLOCSS、PRECSSなどが命名規則や入れ子構造についてフォーカスしているとしたら、このEVERY LAYOUTはCSSプロパティとセットで語られていて面白かった。普段仕事としてCSSは難しい(壊れやすい・予測しにくい)から避けているけどその辺がカバーできそう。

Relearn CSS layout: Every Layout (every-layout.dev) はこの本の原著になっているサイトで、現時点で3版になっているので英語に苦手感がなければそっちで読むのもあり。

Every Layout-モジュラーなレスポンシブデザインを実現するCSS設計論

手元の書籍|Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 – 2014/7/24

今見てもそんなに悪くないし、CSSの設計手法については殆ど網羅されている。が、新しいCSSプロパティには対応していないし今買う感じではないと思う。(サンプルコードが古くなるのは仕方ない)

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

まとめ

1冊目と3冊目がおすすめです。


Profile picture

Webのフロントエンドからバックエンド、プロトタイピングからプロダクションまで。定額の開発サービスも。詳しくはAboutページで。