持続可能なCSSルール ECSS（Efficient CSS）
ECSSとは、OOCSS、BEM、SMACSS、FLOCSSなどクラス名をどう命名するかに着目したCSS設計とはちょっと違っていて、どちらかというとコーディングガイドラインみたいなルール。
個人的に、すごく納得感のあるルールだった、というか無意識にやっていたことが明文化された感じがする。
paddingはコンテナ要素とインタラクティブ要素のみ適用する- 例:
p要素ではなくその親のarticle要素でpadding調整する
- 例:
- 基本的なスタイルはグローバルスコープで指定する
- 例:
line-heightやp + p { margin-top: xxx }など
- 例:
- デザイントークン（CSS Variables）を使う
- UAStylesheetと同じ値で上書きしない
- NG例:
div { display: block; }など
- NG例:
- ネストは1レベルまで
- 例:
.parent > .child { … }まで
- 例:
positionとdisplayは必要最小限のスコープにとどめるmarginの向きを揃える- 例:
margin-topのみでmargin-bottomは使わない
- 例:
- 個人的には avoid margin-top派閥の人間なので思想矯正が必要
- HTML構造は可能な限りフラットにする
- 例: 修飾用のdivなどをできるだけ排除する
- 詳細度は可能なかぎり低く保つ