こんにちは、ごみばこです。
最近になってようやく、ちゃんとしっかり CSS の教科書を読みました（設計の大事さと紹介まで）。そのメモというか、まとめです。CSS 設計マジ大事やなー。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 | 谷 拓樹 |本 | 通販 | Amazon
余談ですけど、ここのところブログをちょこちょこ書いているのですが、トップページが遊び要素メインで中身が無いと見なされてか Adwords も Amazon アソシエイトも審査落ちしたので、ごみばこいんからのリンクはノーアフィリエイトです。かなしみ、ビールの一杯くらい稼いだっていいじゃない
CSS設計がなぜ重要か
フロントエンドも作って終わりではない。 web サイトのコンテンツが増えたり、キャンペーンをしたりなど、 web サイトの内容が変わっていくので、それに合わせて各コードのメンテナンスをしていかないといけない。それはもしかしたら誰かに引き継ぐかもしれないし、自分でやるかもしれない。リッチな表現が求められる今の web サイトでは HTML も Javascript も CSS も複雑なものになっていく。
中でも CSS はシンプルに書ける一方でたくさんの記述が必要がゆえ、複雑なことをしようとすると、スパゲッティコードになりやすい。だから設計というルールを設けていく。 プログラミングと同様に CSS も設計をすることで、予測しやすい、再利用しやすい、保守しやすい、拡張しやすい、ものを記述できるようになる。
設計をどうやっていくか
見た目の変更や入れ替えがあるなかで、使いまわすようなものも多くある。その使いまわしのために、要素を部品＝モジュール、コンポーネントと考えていく設計が有効になる。 そのコンポーネントとして考えるために、いくつかの実際に活用されている設計方針を紹介していく。
OOCSS
構造と見た目の分離、コンテナとコンテンツの分離を挙げている。 コンポーネントとしての構造、ブラウザ上での見た目を分離して考えること。ある要素がどこにいるかのコンテナ、ある要素のコンテンツを分離して考えること。
後者は難しいが「場所に依存しないセレクタを書くこと。どこそこの中にある○○、とし定義されるようなものを避けること」と考えるとわかりやすい。
SMACSS
Home - Scalable and Modular Architecture for CSS
OOCSS で言われている分離を実践するためのカテゴリが決められている。
Base ：見た目のリセット、標準化 Layout：全体的なレイアウト設定（2カラムなの、3カラムなの、ヘッダー？） Module：コンポーネント自体 State ：コンポーネントの状態 Theme ：コンポーネントの見た目違い
もう一つのSMACSSのポイントとして「HTMLとCSSの分離」が挙げられている。
要するに。 SMACSS = OOCSS + OOCSSを使うためのカテゴリ + HTMLとCSSの分離
BEM
CSSにおける命名規則の提案。OOCSS、SMACSSを考えてのコンポーネントを記述できるよう規則が決められている。
Block Elementの集合体、ひとつのコンポーネント 命名は自由
Element コンポーネントに含まれる要素の1つ1つ 命名は Block_Element という形式
Modifier BlockとElementについて、場合分けが起こるときに使う 命名は Block__Modifier または Block_Element__Modifier という形式
たしかにBEMでは、アンダースコアを付けるように、と言っているがそれはさほど重要ではない。キャメルでもハイフンでもいい。コンポーネントの体に合わせた命名規則を設けることで、シンプルにたくさん書けるCSSへ規律をもたらし、事故を未然に防いだり可読性を上げることが大事。
MCSS
SMACSS にレイヤーというルールを足すようなもの。複数のレイヤーを構成することによってCSSを設計する。レイヤーとして縛りを設けることで、CSSプロパティの汚染を防いでいく。
Foundation プロジェクトの土台、resetcssやnormalize.cssがそれ 最初に読み込まれる
Base コンポーネント定義 他のレイヤーから拡張変更ができる必要がある Baseレイヤーコンポーネントは上書きできる
Project 具体的なページを構成する要素、Baseレイヤーコンポーネントの集まり。現実的にはこのレイヤーが厚くなりがちだけど、上書きによって階層が深くならないようにする Baseレイヤーコンポーネント、Projectレイヤーコンポーネントを上書きできる
Cosmetic 下層レイヤーコンポーネントに含まれないちょっとしたスタイル。ヘルパー、ユーティリティのようなもの、グローバルなModifierなど。 基本的に上書きは出来ない
Context 例外的なレイヤー。すべてを上書きできる。 特定のブラウザ、デバイス、状況によって切り替えるようなもの。PC / スマホ、ログインしてる / してない。 セクションを持たず、各コンポーネントについて書かれるセクションの中で記述される。
レイヤーの分け方に合わせて、CSSを記述するときの基本原則がいくつかある。
- コンポーネントを1つのセクションにまとめる
- Modifierを個別クラスにし、単体で利用しない
- コンポーネントのカスケーディング（上書き）が出来る
- あるコンポーネントに含まれる別のコンポーネントに適用するスタイル。ただし上層のコンポーネントを上書きしてはいけない。同じ層か、下層のみ上書き可能
- クラス名を略語にする
FLOCSS
この本の筆者が考えている、全部まぜのいいとこ取り。
ソースファイルのセクションわけ、レイヤー制約、命名制約が盛り込まれている。詳細は GitHub で！ hiloki/flocss: CSS organization methodology.
ルールこそ多いように見えるが、ルールに乗れると非常に楽（体験談）
ここまで読んで
個人的なちょっとしたやつで Bootstrap を入れた上で、新たに書き足す部分を FLOCSS を意識して作ったところ、非常にわかりやすく、事故もなく、安心安全にできてちょっと感動してました。 …、とはいえ FLOCSS でみんなやろうぜ！というわけではなく。本にも書かれているのですが、色々な考え方があるけど俺達はどうやってやるよ、というのを改めてちゃんと考えないとね、って思いましたとさ。
いじょ。