The Naming Rule

One Rule

A Yumma CSS class is the initials of the CSS property, a dash, then the initials of the value.

display: flex;                        /* d-f   */
justify-content: space-between;       /* jc-sb */
grid-template-columns: repeat(3, …);  /* gtc-3 */
text-transform: uppercase;            /* tt-u  */

Values that are numbers or scales keep their scale position instead of initials: p-4, fs-lg, fw-600, zi-10. Values that are single words with no useful abbreviation keep the word: d-none, pe-auto, bs-none.

That is the entire rule. Every class resolves to exactly one CSS property — there is no class that sets three properties at once, and no class whose name refers to a concept that does not exist in CSS.

What This Buys You

The property name underneath is the real one. A developer who writes gtc-3 every day is rehearsing grid-template-columns; the abbreviation is a pointer to the spec, not a replacement for it. When you open a plain stylesheet, the vocabulary you have been using is still the vocabulary that works.

Where The Rule Bends

Initials are not unique, and CSS has more properties than there are short letter combinations. Four things follow from that, and it is better to know them now than to discover them at 2am.

1. Some prefixes are shared

Yumma CSS defines 239 utilities. Seventeen prefixes are shared between two or more properties, and are disambiguated by the value, not the prefix:

The value sets on either side of each row are disjoint, so no class is ambiguous. But reading o-h correctly means knowing that overflow owns the keywords and opacity owns the numbers. That is a lookup, and pretending otherwise would be dishonest.

2. Logical properties fall back to axis letters

block-size and inline-size would both want prefixes that were already taken — bs by four properties, is by isolation. They use the axis instead:

These are the clearest exception to "initials of the property". They are mnemonic — the block axis is the y axis in a horizontal writing mode — but they are not derived.

3. A few value names are chosen, not derived

font-family takes ff-d, ff-m, ff-s — default, mono, serif. default is not a CSS value; it is the stack Yumma CSS ships. Colors are likewise a supplied scale (red-1 … red-5), not CSS keywords.

4. Collisions can cost a value

Sharing a prefix constrains what can be added later. color-scheme ships cs-l, cs-d and cs-ld, but not normal — cs-n was already corner-shape: notch. The value is genuinely unavailable, not merely renamed.

This is the real long-term cost of the scheme, and it is why the prefix table is worth understanding rather than memorising.

A Note On Theme Colors

Five prefixes pair a color utility with a keyword utility: c, f, s, ac and bc. Because the two are told apart by value, a custom theme color whose name collides with a keyword on the other side will shadow it.

export default defineConfig({
  theme: {
    colors: {
      // `ac-sb` is already `align-content: space-between`.
      sb: "#bec6f2",
    },
  },
});

Name theme colors with words (accent, surface, border) and this never comes up. The yummacss-canon validator reports the collision if it does.