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

半田惇志

CSS設計は多くの現場で導入されていますが、いまだに悩みがつきません。プロジェクトの大小や性質によって最適解も変わってきます。
そこで本書は、CSSのさまざまな設計手法を紹介しつつ、考え方や実践のポイントを明確化します。そのうえでボタン、ラベル、カード、テーブル…といったウェブの定番的なモジュールを網羅的に取り上げ、さらにはそれらの組み合わせ方まで、実践的なコードを紹介します。
代表的な設計手法である「BEM」と、著者が開発した設計手法「PRECSS」によって対比的な解説を加えており、思考をなぞることで最適解が炙り出されることでしょう。
駆け出しのウェブ開発者、フロントエンドエンジニアの方に、ぜひ読んでいただきたい1冊です。

• カテゴリ: ビジネス・実用
• ジャンル: IT・コンピュータ / デザイン・グラフィックス
• 出版社: 技術評論社
• ページ数: 512ページ
• 電子版発売日: 2020年03月06日
• コンテンツ形式: EPUB
• サイズ(目安): 19MB

[ブクログ · ★★★★★]

バックエンドを中心に10年ほどWebエンジニアとして従事してきました。
CSSの知識は、レイアウトを整えることができる程度で
最近の命名規則や設計方法よくわかっていないレベルです。

この本を読み、既存のプロジェクトでフロントエンジニアの方が
コーディングしているCSSの命名規則やclassの設定方法など
初歩的なことを学ぶことができました。

CSSは書けるけど、うまく設計ができないやclassの命名規則など
を理解していない人の入門書としてよいと思います。

[ブクログ · ★★★★★]

前半はCSSの歴史から始まり、どのようなポイントを意識しながら設計すれば大規模な開発でも耐えられるか具体的なコードとともにわかりやすく説明されている。
後半は前半で紹介されたポイントと照らし合わせながら、BEMとPRECSSのコードが大量に記載されており、理解した後はそのままサンプル集としても流用できる作りになっている。

分厚くてタイトルもお堅いが、中身は非常に読みやすかった。どのようにCSSを定義していけばカオスにならずに済むのか気になっている人は読んで損はない書籍だと思う。

[ブクログ · ★★★★☆]

中盤のコンポーネント毎の書き方の説明のところがよかった。なぜここにこのプロパティを入れるのか1個ずつ説明がされていてわかりやすかった。逆に前半のBEMとか設計手法の話は「ざっくりつかむCSS設計」とか他の本のほうがわかりやすいと感じた。

[ブクログ · ★★★★☆]

今までCSSはなんとなく書いてきたが、本書を読むことで体系だった設計を知ることができ、モジュール指向でHTML/CSSを組むことができるようになる内容だった。

モジュールごとの解説では、BEMと著者が考えた「PRECSS」での書き方を比較しながら解説してくれるので、２つの設計手法の違いを認知しながら、モジュール設計を学ぶことができる。

[ブクログ · ★★★★☆]

前半はSMACSSやBEMといった各種CSS設計技法の解説、後半はBEM、PRECSSを利用した実際に良く使うであろうボタンやテーブルなどのモジュールについてどのようにスタイルを当てていくのか具体的かつかなり突っ込んだ解説となっている。
実用度も高く良い本だが、個人的にはCSSにモジュールだのレイアウトだのを示すようなプレフィックスを付けるやり方は好きになれない。