Methodology

CUBE CSS

A CSS methodology oriented towards simplicity, pragmatism, and consistency — designed to work with the browser, not against it.

What is CUBE CSS?

CUBE stands for Composition Utility Block Exception — four layers that build on each other, each with a clear and limited responsibility.

The methodology was created by Andy Bell and is designed to embrace the browser's natural cascade rather than fighting it.

The four layers

C
Composition
High-level layout systems. The skeleton.
reach: 95%specificity: 5%

U
Utility
Single-purpose classes. One job done well.
reach: 80%specificity: 20%

B
Block
Skeletal components. Small, specific rules.
reach: 30%specificity: 50%

E
Exception
State deviations via data attributes.
reach: 5%specificity: 80%

The core idea

Rather than treating CSS as a problem to be solved with ever-increasing specificity, CUBE CSS treats the cascade as a feature. Each layer has a defined role:

Global CSS — resets, custom properties, base type scale
Composition — layout primitives, flexbox/grid wrappers
Utility — single-purpose design-token classes
Block — component-specific rules, kept small
Exception — state variants via data attributes

The browser is hinted with flexible rules. It fills in the gaps. Specificity stays low. Overrides stay readable.

How it compares

CUBE CSS differs from BEM, SMACSS, and utility-first approaches by keeping specificity intentionally low and letting the cascade do its job.

Reach →

Global CSS

100%

Composition

90%

Utility

70%

Block

30%

Exception

5%

Specificity →

Global CSS

2%

Composition

5%

Utility

20%

Block

50%

Exception

85%