CUBE CSS

CUBE CSSとは？

CUBEはComposition Utility Block Exceptionの略 — 互いに積み重なる4つのレイヤーで、それぞれが明確で限定された責務を持つ。

このメソドロジーはAndy Bellによって作られ、ブラウザの自然なカスケードに逆らうのではなく、受け入れるよう設計されている。

4つのレイヤー

中心となるアイデア

CSSを増大する詳細度で解決すべき問題と捉えるのではなく、CUBE CSSはカスケードを機能として扱う。各レイヤーには定義された役割がある:

• グローバルCSS — リセット、カスタムプロパティ、基本タイプスケール
• 構成 — レイアウトプリミティブ、flexbox/gridラッパー
• ユーティリティ — 単一目的のデザイントークンクラス
• ブロック — コンポーネント固有のルール、小さく保つ
• 例外 — データ属性による状態バリアント

BEMとの比較

CUBE CSSはBEM、SMACSS、ユーティリティファーストのアプローチと異なり、詳細度を意図的に低く保ち、カスケードが機能するようにしている。