Flexibility vs Rigidity

In CSS, there are two approaches to style extension:

1. Inheritance (BEM): Creating a modifier .btn--large.
2. Composition (Utility): Combining base class and utilities .btn .p-large.

Why Composition Wins?

Instead of creating hundreds of specific classes (.card-blue-border-large-shadow), you create a set of small, reliable " bricks " (utilities).

/* Composition via variables */
.card {
  border: 1px solid var(--card-border, #ccc);
  padding: var(--card-pad, 1rem);
}

.card--featured {
  --card-border: gold;
  --card-pad: 2rem;
}