CSSのデザイン設計メモ
今まであまり触れてこなかったスタイルの事について少しだけ触れたので、メモ程度に残す。デザイン的な事をするのは楽しいながらも、美的センスも問われている気がして難しい。目指せ、フルスタックなエンジニア。
CSSの基本
Cascading Style Sheets の略称。 HTML で記された範囲内のスタイル指定を行う役割を担う。以下のように表記する。
hoge {
fuga : piyo;
}
- hoge : セレクタ
- fuga : プロパティ名
- piyo : プロパティ値
頑健性のあるCSS設計
- OOCSS
- BEM
- SMACSS
- FLOCSS
OOCSS
Object Oriented CSS の略称。構造と見た目を分離させる事が複雑化を抑止。しかし構造と見た目で分離するのに困難で曖昧なプロパティを扱う際の注意が必要。
BEM
Block, Element, Modifier の頭文字の略称。見た目が悪くなるが、我慢して使えばプロジェクトに規則性をもたらすらしい。（そういわれるとあまり使いたくない…）
SMACSS
Scalable and Moduler Architecture dor CSS の略称。以下の5つのルールで記述される。
| ルール | 説明 |
|---|---|
| ベース | id や class を使用せず、要素のデフォルトとしてスタイルを定義する。注意として、多くのスタイルを定義しないこと。あまりこのルールを併用するべきではない。必要最低限。 |
| レイアウト | ヘッダーやメイン、フッター等のセクションに分けたスタイルを定義する。子孫セレクタで相対的なものにするか、固定的なものにするか分岐させる時に、固定には*-fixedをよく使用する。 |
| モジュール | ロゴやナビゲーション、タブなどの構成パーツに分けたスタイルを定義する。 |
| ステート | javascript 等で状態の切り替えが発生した場合のスタイルを定義する。is-*をよく使用する。 |
| テーマ | 見た目に関するスタイルを定義する。 |
FLOCSS
Foundation, Layout, Object のレイヤーで構成されている。 Object 下には Component, Project, Utility の子レイヤーを持つ。おそらく大規模な設計をするさいの指標としては大切なルールなのであろう。それが故に禁止ルールや非推薦ルールも存在している。
参考
ありがとうございます。