レビューの評価がよかったので、「Web制作者のためのCSS設計の教科書」という本を購入して読んでみました。
どんな書籍か
Webサイトをコーディングするときに使用する、CSSの設計や実際の手法などが記載されています。設計内容の基準は下記の思想に基づいています。
- 予測しやすい。
- 再利用しやすい。
- 保守しやすい。
- 拡張しやすい。
上記の4つを満たすことを目標とする内容です。
特に参考になった点
CSSの再利用や保守性を高めるために、コンポーネント設計のアイデアとして著名な開発者たちが考えた設計方法が具体的に紹介されています。
- OOCSS：構造と見た目、コンテナとコンテンツを分離するオブジェクト指向CSS。
- SMACSS：OOCSSをコンセプトに作られたスタイルをカテゴライズするガイドライン。
- BEM：CSSで難しいとされる命名規則のアイデア。
- MCSS：OOCSSとBEMのコンセプトを元にし、CSSの読み込み順をレイヤーという考え方で行うCSSの構成システム。
- FLOCSS：OOCSS(オブジェクト指向)、SMACSS(カテゴライズ)、BEM(命名規則)、MCSS(CSSの読み込み順)で採用されているすべてのアイデアを盛り込んだ設計。
上記の設計アイデアがまとまって掲載され、わかりやすく紹介されています。
なか見検索ができる
「Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 | 谷 拓樹 |本 | 通販 | Amazon」で、一部なか見が出来ます。
購入する際の参考になると思います。
まとめ
- CSSの設計や実際の手法などが記載されている。
- コンポーネント設計のアイデアとして著名な開発者たちが考えた設計方法が具体的に紹介されている。
- なか見検索ができる。
書籍の内容で、設計のひとつとしてとりあげられているFLOCSSは「GulpとFLOCSSで始めるモバイルファースト的なCSS設計」で以前記事にしてみたのですが、自分が認識しているFLOCSSとそう間違っていないことを再認識できました。
CSSは記法がシンプルで比較的縛りがなく、自由度が高いがゆえに長期にわたって作成しているとカオスになりがちです。こういったCSSの設計の基準になる本が一冊あると、理想のCSSの設計に近づけると思います。今まで読んでみたことのあるCSS設計の書籍では一番しっくりきたのでおすすめです。
Amazonでなか見検索もできるので、気になった方は確認してみるのもよいと思います。
コメント