CUBE CSS: Composition, Utility, Block, Exception

Strict component isolation (as in some CSS-in-JS setups) treats inheritance as a bug to eliminate — every property is set explicitly, nothing is allowed to trickle down from an ancestor. CUBE CSS argues this throws away one of CSS's most powerful features: a well-designed inheritance chain (typography, color) lets you set a handful of rules at the root and have them apply sensibly everywhere, adjusting only where genuinely needed.

This philosophy shows up concretely in the Composition layer: instead of every component defining its own spacing logic, generic, inheritance-friendly patterns like .stack handle it once, and every component that opts into .stack benefits without redefining anything.

Composition — generic, cosmetics-free layout primitives (.stack, .cluster, .grid-auto) reusable across the entire project. Utility — familiar single-purpose helper classes (.u-text-center), same concept as any utility layer. Block — CUBE's explicit recommendation is to use BEM here; it doesn't reinvent component naming. Exception — context-specific variations expressed through data or ARIA attribute selectors instead of extra classes, keeping state styling tied to the same source of truth JavaScript and accessibility already use.

The practical effect is a stylesheet where layout (Composition), one-off tweaks (Utility), component identity (Block), and state (Exception) are all clearly separated by *purpose*, not just by naming convention.

SMACSS's .is-active and CUBE's [data-state='active'] look superficially similar, but the attribute-based approach has one meaningful advantage: it can directly reuse attributes that already carry meaning for accessibility and behavior, like aria-expanded or aria-hidden, instead of maintaining a parallel class that has to be kept manually in sync.

This reduces an entire category of bug: a state class silently drifting out of sync with its ARIA counterpart. When the CSS styles off the same attribute the accessibility tree reads, drift becomes structurally impossible — there's only one flag to update, not two.

Working With The Cascade, Not Against It. Older methodologies often treat the Cascade as a threat to be neutralized through low specificity and strict scoping. CUBE CSS, by Andy Bell, takes the opposite stance: the Cascade and inheritance are CSS's actual superpowers, and a good architecture should lean into them, not fight them.

Composition: Context-Agnostic Layout Primitives. Composition styles define layout without cosmetics — a .stack that adds consistent vertical spacing between children, a .cluster that wraps and gaps horizontal items. They're deliberately generic, reusable across completely different-looking components, similar to ITCSS's Objects layer.

Composition Layer. What is a CUBE CSS Composition rule primarily responsible for?

• →Setting a component's colors and typography
• →Generic, reusable layout behavior like spacing between children
• →Toggled interactive states

Utility And Block: The Familiar Pieces. Utilities are the same single-purpose helper classes seen in Scalable CSS (.text-center, .mt-4). Blocks are CUBE's component layer, using BEM-style naming directly — CUBE CSS doesn't reinvent component naming, it explicitly recommends pairing itself with BEM for this layer.

Utility And Block Layers. Which existing naming convention does CUBE CSS explicitly recommend using for its Block layer?

• →SMACSS's Module convention
• →BEM's Block, Element, Modifier convention
• →None — it invents its own entirely new naming scheme

Exception: Named, Deliberate State Changes. Exceptions are CUBE's answer to context-specific variation, using data attributes rather than extra classes: [data-state='disabled'] or [aria-expanded='true']. This deliberately overlaps with existing ARIA attributes where possible, so a single source of truth drives both accessibility and styling instead of two systems that can drift apart.

Exceptions Via Attributes. Why does CUBE CSS favor styling based on data/ARIA attributes for exceptions, rather than adding more classes?

• →Attribute selectors are always faster to match than classes
• →It reuses the same attribute JavaScript and assistive technology already rely on, avoiding two separate, driftable systems
• →Classes cannot express conditional state at all

CUBE CSS Model Complete. You now understand CUBE CSS as a deliberate synthesis: Composition borrows ITCSS's Objects idea, Block borrows BEM directly, Utility mirrors Scalable CSS's utility layer, and Exception offers a genuinely modern take on state by tying styling to the same attributes JavaScript and accessibility tooling already use.

Write A Single-Purpose Utility Class. CUBE CSS's Utility layer is made of small, single-purpose classes like this one.