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

著者 : 谷拓樹

• インプレス (2014年7月24日発売)

作品紹介・あらすじ

予測しやすい、保守しやすい、最利用しやすい、拡張しやすい-コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!

感想・レビュー・書評

[ミズゴロウさんの感想 · 2022年1月24日]

CSS設計について、調べても断片的知識しか得られていない感覚があったため、体系的に学習したく購入。様々な設計方、設計に係る考え方が非常にわかりやすく学習出来ました。
Sassのファイル設計についても学習したいので、別の著書も購入しようと思います。

[めちゃくちゃゆかさんの感想 · 2022年1月19日]

詳細度やBEMなどしれてよかった

[parsecmonkeyさんの感想 · 2021年6月21日]

CSSを書く際に活かせる情報満載です。
次からは、きっと見やすいコードが書けるはず......

[50keiさんの感想 · 2020年11月21日]

web作成を趣味としているが、cssがどうしても冗長化したり、スパゲティになってしまうことが多々あった。この本は、そんな悩みに指針を与えてくれる。cssをある程度使っていて、キレイなコードを書きたい人にオススメの本。

[usausa01さんの感想 · 2020年9月25日]

ツイッターでフォローしている方が読んでいたので読んだ。　

何度も読み返し。インデックスから

css書いている人は読んだほうがいいと思う。

>直下に書く。

フロントエンドのことも載っていた。

[hatsuさんの感想 · 2020年2月28日]

CSS設計の基本となる考え方について勉強できたのでよかった。
以下のような事柄について書かれている。
### 良いCSS設計の特性
- 予測しやすい
- 再利用しやすい
- 保守しやすい
- 拡張しやすい
の特性を持つこと。

### 破綻しやすいCSS
- HTMLの構造に依存している
- article h1 { color: red; }とか。
- スタイルを取り消している
- 一度定義したルールを `0`や `none` などでリセットしているとか
- 絶対値を多用している

詳細度
1. !important
2. インライン記述(style属性)
3. IDセレクタ
4. クラスセレクタ・属性セレクタ・擬似クラス
5. 要素セレクタ・擬似要素
6. ユニバーサル・セレクタ

コンポーネント設計のアイデア
- OOCSS(Object Oriented CSS)
- SMACSS(Scalable and Modular Architecture For CSS)
- BEM(Block, Element, Modifier=変更)
- FLOCSS(フロックス)

[yondayo2020さんの感想 · 2020年2月12日]

今までなんとなくで書いていたFLOCSSについての理解を深めることができた。

3回同じパターンが来たらコンポーネントを考えるを基準にCSSの設計をしていこうと思う。

CSSガイドラインを作る時にとても役に立つ知識
繰り返し読む

[よーへいさんの感想 · 2019年4月29日]

CSSを触ることがある人は必読。今後自分でサービスを作るにしても、組織にジョインするにしても、それぞれ何かしらこの本で紹介されているCSS設計がベースになっているはず。OOCSSはどの設計においてもベースになっているし、BEMに関しては命名規則としてその地位を築いている。多少の違いはあれど、基礎は押さえておくべき。この本はその紹介をわかりやすくしており、理解しやすい。CSS初学者よりも、毎日CSSを書くベテランの人こそ目を通しておくべきである。書かれた当時はそうではなかったが、Ch7のWebコンポーネントに関しては、すでに実現されているので軽く流すくらいで良いだろう。Ch3が肝である

[koishi-2018-pcさんの感想 · 2019年1月12日]

インターネットを見るのが、PCだけでなくスマートフォンやタブレットなど多様になり、Web作成の方法も、大きく変化しています。
モダンWeb開発、レスポンシブWebデザインを勉強しようと思いたち、この本を手に取りました。

HTML5とCSSとJavascriptを組み合わせれば、新しいWebサイトが簡単に作れると思ったのに、CSSを扱うのがいかに大変か、本書を読んで驚きました。

個人や小さな仕事用のWebサイトを作るだけなので、複雑なことをやる必要はないけれど、CSSを扱う時の注意事項が少しわかりました。
他の本を読む時も、そこを押さえているかチェックできると、応用もやりやすいと思います。

内容と目次・著者は

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

内容　：
コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説。
自身の経験から生まれた、OOCSSやSMACSS、BEMなどのプラクティスを紹介する。

著者　：　谷 拓樹
株式会社サイバーエージェントフロントエンドエンジニア。
コミュニティサービスの開発、UIデザイン、テクニカルディレクションを担当。


2016/03/09 　予約　3/15　借りて読み始める。3/16　ざっと読み終わる。
　

[shimotsuさんの感想 · 2018年11月17日]

BEMの習得のために読んだ。ある程度大きい規模にならないと、コンポーネント化の恩恵は受けられなさそう。