CSS設計完全ガイド

記事ごとの説明は、記事本文のうちこの本に触れた部分をAIが要約したもので、筆者の原文ではありません。

• 【2024年版】エンジニア1年生の自分に読んでもらいたい書籍 Qiita · かずなり · 2022年6月 · いいね 1,716

  エンジニアが必ず使うCSSの知識として、本書を一度読んでほしいと述べている。CSSの歴史と問題点、BEMやPRECSSなどの設計手法を学び、コンポーネント単位の実装やレイアウトの定義へ進む内容を紹介。具体的なコーディング解説は初心者にも理解しやすく、仕事で使い回せるとしている。自身のCSS実装の基礎にしており、読了後も辞書的に利用できると評価している。

• 実務未経験者が今まで独学に使ってきた技術書を公開していくよ Qiita · 天才 · 2021年9月 · いいね 49

  HTMLとCSSを学ぶ流れで本書に取り組み、修正箇所の変更が別の箇所を崩す事態を減らすためのクラス設計の考え方と実践方法を紹介していると述べている。クラスの段階で「レイアウト」と「モジュール」を分ける考え方に加え、複数の設計手法のうちBEMやPRECSSで実際にどうコーディングするかを挙げ、自身はPRECSS派としている。学んだことでCSSを書くのが確実に楽になったと評価している。

• フロントエンド一年目が2020年に読んだ本まとめ Zenn · hakushun · 2020年12月 · いいね 29

  CSSを書き始め、記述方法に悩んだことをきっかけに本書を購入した。CSS設計の4つのゴールを8つのポイントに分けて解説しており、Atomic Designにも本書で出会ったという。CSSの問題を明確にし、それぞれへのアプローチを示す構成を評価している。例のCSSを8つのポイントに照らして問題点を指摘し、リファクタリングする過程が特に勉強になり、後半の実装例からはボタンをそのまま使ったとしている。筆者は、これを超えるCSS本は出てこないと思うほど高く評価している。

• 新人エンジニアにおすすめの技術書9選 Qiita · oonuki_beng · 2023年12月 · いいね 23

  業務でCSSを書くにあたり、粗悪なコードを書く前にスタイルシートの規範や可読性を学ぶ目的で読んだとしている。OOCSS、SMACSS、BEM、PRECSSの主要な設計手法を説明し、後半ではBEMとPRECSSを使ったボタンなどの部品やタブナビゲーションのスタイリングを扱うと紹介。UI部品の作例が多く、システム開発時の辞書としても使えると評価し、HTML・CSSの基本を理解した人や可読性・保守性の高いCSSを書きたい人に勧めている。

• 【2024年度版】エンジニア1年目で読んでよかった技術書籍まとめ Zenn · aya · 2024年7月 · いいね 10

  CSSによるウェブデザインの基礎から高度なテクニックまでを扱う本として紹介している。CSSの設計と実装を深く理解し、効率的で保守しやすいスタイルシートを作成するためのベストプラクティスを学べると述べている。CSSの設計に関する知識を実装に活かし、スタイルシートを効率よく作成して保守しやすくすることに役立つ内容としている。

• 【技術書】自分用_読んだ技術書を簡単にまとめていくための記事 Qiita · うるち 米 · 2022年7月

  設計手法への理解を深めるために第3章を読み、設計の考え方や規則を学べたとしている。唯一の最善手法はなく、手法を組み合わせてカスタマイズする必要があると捉え、辞書的に手元に置きたいと評価している。第4章以降は分量が多いため必要に応じて確認する予定だが、他書では扱われにくいと感じた独自手法PRECSSは割愛し、後半のBEMとPRECSSによるコード例のうちPRECSSも読まなかったという。

• 社内輪読会のススメ 企業テックブログ · ラクス · 2022年3月

  筆者のフロントエンドチームが週1回の社内輪読会で最初に読んだ本。担当プロダクトが異なるメンバーが参加するため、言語やフレームワークに依存せず、フロントエンドエンジニア全般に生かしやすい内容として選んだという。1回に30〜40ページ読む形式にしたところ、読み切れず予習前提になる面があったと振り返っている。

• 【2021年】 技術書好きプロエンジニア達が紹介する40選 企業テックブログ · ラクス · 2021年9月

  LT会の発表者は、さまざまなCSS設計手法や考え方、実践上のポイントを実践的なコードとともに解説した本として紹介している。OOCSS、SMACSS、BEMやモジュール、レイアウトの設計を理解でき、CSS設計本で挫折した人や初心者、コーダー教育をする人に向くとする。社内の輪読会にも適していると述べている。