投稿元：
レビューを見る
セレクタや疑似要素、プロパティなどを覚えればそれほど難しくないCSS。
しかし、自由にかけてしまうからこそ、後のコード管理も踏まえて書くことが大事です。
最初は数百行程度でも、ページや要素の追加によってあっという間に数千行に達することもありますが、そうしたCSSはメンテナンス性が低く、また再利用しづらいといった欠点があります。
本書はローカルルールで書いてしまうことの多いCSSの記法に警鐘を鳴らし、以下4つに焦点を当てた、より良いCSSの書き方を解説した本です。
・予測しやすい
・再利用しやすい
・保守しやすい
・拡張しやすい
また、避けるべきCSSについてもまとめられており、内容もそれほど難しくありません。
すぐに実務に役立てられるレベルですが、簡単な割に実用性に富んでいるノウハウなので、繰り返し目を通しておきたい項です。
本書の最大の特徴とも言える項が、CSSコンポーネント設計です。
代表的な5つの設計手法が紹介され、一定のルールに則したCSSコーディングがいかに重要か説かれています。
・OOCSS
・SMACSS
・BEM
・MCSS
・FLOCSS
巻末にはSassを使ったコンポーネントの作成・管理やスタイルガイド、パターンライブラリが掲載されています。
初版が2014年とWeb関連の書籍にしては少し前ですが、CSSの設計という概念にには古さを感じず、今後にも十分役立つ内容です。
私もついその場で間に合わせるために適当にセレクタやプロパティを追加してしまうことがあります。
こうした姿勢を矯正するため、業務の際もなるべく行き当たりばったりな書き方は避け、自分以外の人でも管理しやすいコードを書こうと心がけています。
多少回り道になったとしても上記のようなCSS設計について深く考え、学んでおくことはWebデザイナーやコーダーが長く仕事を続けていく上で欠かせない知識だと思います。
投稿元：
レビューを見る
CSS を書くにあたり事前に設計を知っておきたかったので読んだ。よくある教本では見られないような Web 業界での知恵を得ることができた。
投稿元：
レビューを見る
へっぽこコーダーなので読んでみた。丁寧で後で見てわかるCSSを書かねばならんなあ…。あとsass導入しようか検討中。
投稿元：
レビューを見る
CSSのプロパティの解説やテクニック的な本ではなく、CSSの書き方(設計手法)について書かれた本。OOCSS(オブジェクト指向CSS)という概念とそれをベースにしたCSSのガイドラインについて書かれてあった。
昔からCSSの書き方についてかなり悩んでいたのでこういう本がでるのをまさに待っていた。これからCSSを書く時は参考にしたいと思う。
なんとなく思ったのは、スタイル指定する箇所にはクラスをつけたほうがよさそうだということと、子孫ではなく子セレクタを想定したスタイルにしたい場合は、子セレクタ(">")を指定したほうがよさそうだということ。これからはそういう書き方を意識するようにしよう。
Micro ClearfixというClearfix手法を初めて知った。何で:beforeと:afterのdisplayをtableにするといいのだろう・・・。
後、クラス名が『orange』というところのスタイル指定が『background-color:#6cc655; /* 薄い緑色 */』となっている例は笑った(実際にそういうことはよくあるらしい)。まあ、自分も似たようなことやっちゃったことあるので、笑える立場でもないんですが・・・。
Web Componentsは全くもって分からない。こっちはもう少し立ってから勉強しても遅くなさそう。それより自分は、Grunt.jsなど、コンポーネントの運用に必要なツールの勉強をしたほうがよさそう。
投稿元：
レビューを見る
CSS設計の基礎から実践のヒントまで一続きに全体を理解できる良書でした。ちょうどいい厚さ。何故CSSに設計が必要なのかという理由からOOCSS,SMACSS,BEMなど話題になったCSSの設計のコンセプト、よくあるコンポーネントを例にした実践方法、ちょっと先の未来に来るであろうWeb Componentsまで知ることができます。Sassを使う場合やスタイルガイドの話まで載ってるので、これ１冊で最近のCSS周りのトレンドは大体把握できそう。
CSS設計の考え方はいくつか出ているけど、単体で細切れに紹介されているわけではなく、それぞれの特徴や似ている部分（例えば、SMACSSでいうところの○○はBEMの○○の位置づけ～みたいなこと）にも言及されていたので分かりやすかった。
知らないツールや記事もたくさん紹介されていたので、それだけでも参考になりました。最初からコンポーネント化を目的にしない、プロジェクトに合った設計を、というのには納得なのですぐに全部を取り入れることはできないかもしれないけど、まずは命名規則やルールの分離からでも始めてみようかな。
投稿元：
レビューを見る
CSSのデザインパターンのようなことが、たくさんあったけど、CSS初心者の僕には何がすごいのか、よくわからなかったです。
投稿元：
レビューを見る
web作成を趣味としているが、cssがどうしても冗長化したり、スパゲティになってしまうことが多々あった。この本は、そんな悩みに指針を与えてくれる。cssをある程度使っていて、キレイなコードを書きたい人にオススメの本。
投稿元：
レビューを見る
CSSを実装するにあたって、いくつかの方法論を学ぶ上で非常に役に立った。ある程度、HTML、CSS、Javascriptを書けるようになったら、読んでおくと、変なCSS書かずに済むので、オススメ。
個人的にサーバーサイドやる人がたまにフロント触る羽目になった時に読んでおくとすごい捗ると思う。
投稿元：
レビューを見る
webの勉強をしている最中の初心者が読むには、ちょっと難解でした。
ただ単に制作をするだけなら気になりにくいですが、後で編集しやすく拡張もしやすく…とかいろいろ考えると初心者には手に負えません（笑）。
OOCSSから派生するCSS設計のアイデアは参考になりました。構造と見た目の分離。コンテンツとコンテナの分離。これが基本ということでしょうか。
とりあえずこういう考え方があるんだな、という感じに今のところは留めておこうと思います。
もう少し、いろいろなことが解りだした時に再度参考にします。
ひとまず詳細度については気をつけてCSS設計をして行きたいと思います。
投稿元：
レビューを見る
最近のCSSのコーディンぐ技法について網羅
CSSはセレクタなどがグローバルとなるため、巨大で長期的な文書やWebサイトを管理する際には、保守が問題となる。これを防ぐためのテクニックについて、最近の手法などが多数紹介されている。
大まかには以下２点の原則を元に、classの命名規則の手法や使い分けなどについて説明している。
* 変化に対応しやすくするために、タグでなくclass属性で指定すること。
* 派生関係などがわかるように、classの命名規則を設けること。
このような最近のCSSの動向について網羅されていて参考になった。本自体もカラフルでみやすかった。
投稿元：
レビューを見る
これまで、CSSってどういう状態ならきれいなのかどうかが全くわからず、どうしたものか〜と頭を抱えていました（そのあとCSSを触らなくなっていったのですが…）。そんなときに欲しかった答えがこの本にはありました！
漠然とclassセレクタを使いまわしていたりはしていたのですが、この本にはなぜ使い回すのかが理論から実際のコードまで示されていて、とてもよく納得できました！
基礎知識として読んでおくだけでなく、実際にCSSを書いているときにもそばに置いておきたい本です〜！
投稿元：
レビューを見る
Webデザインをやるうえで欠かせない技術であるCSSをどのようにして設計するかについて書かれています。いろいろな設計パターンが紹介されていますが、いずれもHTMLのDOM要素をうまくコンポーネント化しようとする努力が払われています。フロントエンドに携わる人には実務に直結する知識です。ちょうど知りたいことが書かれていて良かった。次代のWebフロント技術として策定が進んでいるWeb Components構想も興味深い。
投稿元：
レビューを見る
BEMの習得のために読んだ。ある程度大きい規模にならないと、コンポーネント化の恩恵は受けられなさそう。
投稿元：
レビューを見る
CSSを触ることがある人は必読。今後自分でサービスを作るにしても、組織にジョインするにしても、それぞれ何かしらこの本で紹介されているCSS設計がベースになっているはず。OOCSSはどの設計においてもベースになっているし、BEMに関しては命名規則としてその地位を築いている。多少の違いはあれど、基礎は押さえておくべき。この本はその紹介をわかりやすくしており、理解しやすい。CSS初学者よりも、毎日CSSを書くベテランの人こそ目を通しておくべきである。書かれた当時はそうではなかったが、Ch7のWebコンポーネントに関しては、すでに実現されているので軽く流すくらいで良いだろう。Ch3が肝である
投稿元：
レビューを見る
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(フロックス)
または
