CUBE CSS

CUBE CSS, created by Andy Bell, is a more recent methodology that deliberately refuses to pick a single extreme. Rather than going all-in on utility classes or all-in on BEM-style component blocks, it layers four distinct kinds of styling — Composition, Utility, Block, and Exception — each used for the situation it's genuinely best suited to.

The four layers

Layer	Purpose	Example
Composition	Layout-level styles that arrange a group of elements, with no opinion on their appearance	.stack, .cluster, .grid-auto
Utility	Small, single-purpose classes for common, repeated adjustments	.text-center, .mt-4, .visually-hidden
Block	A BEM-like component class for anything complex enough to need its own dedicated styling	.card, .card__title, .card--featured
Exception	An explicit, intentional override for a one-off state or variation, usually via a data attribute	[data-state="collapsed"] { display: none; }

Worked example

HTML

<!-- Composition: arranges children in a vertical stack with consistent spacing -->
<div class="stack">
  <!-- Block: a component with its own dedicated styling -->
  <article class="card">
    <h3 class="card__title">Weekly Report</h3>
    <!-- Utility: one small, reusable adjustment -->
    <p class="card__meta text-muted">Updated 2 hours ago</p>
  </article>

  <!-- Exception: an explicit, intentional override for one state -->
  <article class="card" data-state="collapsed">
    <h3 class="card__title">Archived Report</h3>
  </article>
</div>

CSS

/* Composition — layout only, no color or typography opinions */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, 1rem);
}

/* Utility — one job, reusable anywhere */
.text-muted {
  color: #6b7280;
}

/* Block — a real component with its own internal structure */
.card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
}

.card__title {
  font-weight: 600;
}

/* Exception — an explicit, scoped override triggered by state */
.card[data-state="collapsed"] {
  opacity: 0.5;
  pointer-events: none;
}

Notice how each layer is used for what it's actually good at: composition for arranging things, utilities for tiny repeated tweaks, a block class once something is complex enough to warrant its own name, and an explicit exception — clearly marked with a data attribute rather than a vague extra class — for the one-off state that doesn't belong in any of the other three layers.

CUBE CSS is a pragmatic middle ground, not a rejection of either extreme

Andy Bell's explicit framing is that utility-first purism and component-class purism each solve real problems and each have real costs, and that most production UIs are better served by using both where each is strongest — utilities for the small, highly repeated stuff, blocks for anything with real internal complexity — rather than forcing every situation through a single lens.

See how import order — not just naming — can also encode specificity intent across an entire stylesheet: ITCSS.