「Web制作者のためのCSS設計の教科書」を読んだ
久しぶりの本読んだエントリ。
大体こんな感じの事が書いてある
すごーく端折ってます。詳しくは目次参照。
本文
CSS 設計とかロクに考えてこなかったレベルだったので一気にレベルアップできた(気がする)。
ついタイトルに惹かれて p.41「コンポーネント設計のアイデア」から読み始めたけど、 OOCSS や SMACSS などが駆け足で学べたので正解だった (少なくとも自分にとっては)。 2章を読んだあとに1章に戻って読んだけど、それほど違和感なく読めた。 通読すれば CSS フレームワーク作者が何を考えて設計しているかが大体分かる？はず。 頭に入るまで何度も読み返すことになりそう。
SMACSS の章では案の定というか「これ Bootstrap でやってるやつだ！」って思いながら、その背景にある思想が理解できた。
これまでは「あれ？どれが JavaScript で参照する クラス名(ID)だっけ？」とかなってたけど、本書を読めばその解決策や具体例がたくさん書いてある。
OOCSS, SMACSS, BEM, MCSS, FLOCSS：どれを適用すればいいか
ただ、どのガイドラインを適用すればいいか」については書かれてない。
というか当然筆者が考えた FLOCSS 推しなんだろうけど、正直名前 (Object の Component と Utility の違いや Project って何するの？とか) がスッと入って来なかった。
あくまで初見での印象で、ちゃんと読めばとても合理的なことは分かるんだけど、自分が個人的に一番しっくり来たのが SMACSS と、命名規則に関しては BEM (の -- と __ を使い分ける方) だったので、それで行こうと思う。
MCSS に関してはレイヤーの思想を取り入れてて面白いと思ったけど、これも忘れっぽい自分にはオーバースペックだと感じた。
しかし結局まだ本読んで手を動かしてないので、実際に適用してみたらまた意見が変わるかも。
「3回繰り返したものはパターンとして成立する」
タイトルは本書で知った言葉で、CSS に限らず色んな場面でリファクタリングする指標として使えるいい言葉だと思った。 3回繰り返して初めてリファクタリング、はぜひ実践していきたい。
float, table-cell, flexbox
p.125「ナビゲーション」の具体例が自分にとってタイムリーだった。
inline-block や float を使ってレイアウトする所は display: table; と display: table-cell;、そして table-layout: fixed; を使うといい感じに幅を埋めてくれる。
ただ float なら親要素の幅を超えるようなら次の行に改行してくれるけど、table はそういうことはない。
あとモダンブラウザに限るなら table-cell の代わりに flexbox が使えるよと書いてある。
