CSS Composition

Utility libraries like Tailwind have championed composition, but their approach seems simplistic to me. Utility composition involves adding CSS values to an element incrementally:

This is akin to directly adding CSS rules to a class:

“`css
/* This is composition too! */
.card {
padding: 1rem;
border: 2px solid var(–color-blue-500);
}
“`

Despite this, Tailwind has prompted me to think more about composition. Here are some insights on CSS composition.

### It’s Not a New Concept

**CSS is inherently composable.** The cascade allows for styling a button with various properties:

“`css
.button {
display: inline-flex;
padding: 0.75em 1.5em;
/* other styles… */
}
“`

You can modify the button’s appearance by adding classes:

…
…

“`css
.primary { background: orange; }
.secondary { background: pink; }
“`

You can also apply the `.button` class to other elements:

…

In both cases, composition is evident:

1. Composing `.button` onto `a`.
2. Composing `.red` onto `.button`.

CSS composition has always existed; it’s inherent to the language.

### Developers Take a Narrow View of Composition

Developers often limit composition to adding classes in HTML:

Few discuss composition within CSS files, such as using [Sass mixins](https://sass-lang.com/documentation/at-rules/mixin/) or [advanced Tailwind utilities](https://css-tricks.com/using-css-cascade-layers-with-tailwind-utilities/).

“`css
@mixin button () {
display: inline-flex;
padding: 0.75em 1.5em;
/* other styles … */
}

.button {
@include button;
}
“`

## What is Composition?

Composition stems from two words:

– **Compose:** Put together
– **Composite:** Made of distinct parts

Both derive from the Latin *componere*, meaning to arrange. All work is composed, so why is composition viewed narrowly?

### Composition Doesn’t Reduce Bloat

Class composition reduces CSS bloat with utility classes but may cause HTML bloat:

Selector-based composition might not reduce CSS bloat but lessens HTML bloat:

Which is better? ¯_(ツ)_/¯

### HTML and CSS Bloat Are Probably the Least of Your Concerns

We know:

– HTML can handle a lot without performance issues.
– CSS too.
– 500 lines of CSS is about 12kb to 15kb.
– An image can weigh 150kb or more.

Optimizing images offers better weight reduction than focusing on utility vs. selector composition. Refactoring to reduce CSS bloat has minimal performance impact but improving codebase clarity is more valuable.

### Advanced Compositions

All styles fall into four categories:

1. **Layouts:** Placement on the page
2. **Typography:** Font-related
3. **Theming:** Color-related
4. **Effects:** Gradients, shadows, etc.

These categories don’t overlap. For example:

– `font-weight` is Typography
– `color` is Theming

Creating composable classes per category allows for mixing and matching, much like Lego. HTML might look like this:

A real example using [Splendid Styles](https://splendidlabz.com/docs/styles/) and [Splendid Layouts](https://splendidlabz.com/docs/layouts/):

I’m exploring this system in my work: [Unorthodox Tailwind](