If You Know CSS, You Already Know Yumma CSS

Three years ago I fell in love with the idea of reusing CSS itself as the framework: no long class names, no memorizing specific utilities, no second vocabulary sitting on top of what I already knew.

Most utility-class systems name things after what they do: a class for centering, a class for spacing, a class for a direction. Those names read well on their own, but they're not CSS, & they don't always trace back to it cleanly. You learn them the way you'd learn any new vocabulary, on top of the CSS you already know, not from it.

I wanted the vocabulary I already had to be enough. That turned into Yumma CSS.

The rule

Yumma CSS doesn't invent class names. It derives them from the CSS you already know, using one mechanical rule:

• The prefix is the initials of the property's words.
• The suffix is the initials of the value's words.

/* display: flex;                  -> */ .d-f { … }
/* justify-content: space-between; -> */ .jc-sb { … }
/* align-items: center;            -> */ .ai-c { … }
/* flex-direction: column;         -> */ .fd-c { … }
/* column-gap: 1rem;               -> */ .cg-4 { … }
/* margin-top: 1rem;               -> */ .mt-4 { … }

If you already think in CSS properties, you can guess most of these correctly before you've opened the docs. There's no separate naming system to hold in your head alongside the one you already have.

What it costs you

I'm not going to pretend this is free.

Yumma CSS numeric scale is curated, not arbitrary. Spacing & sizing run on a fixed 0.25rem step from 0 to 96rem, & that's it. There's no bracket syntax, no w-[137px]. If the value you want isn't on the scale, you don't get it, & that's deliberate: fewer one-off values floating around a codebase, more consistency by default. It's the same bet most design systems make when they limit themselves to tokens instead of arbitrary numbers.

It also means this isn't a beginner's tool. If you don't already know what justify-content does, abbreviating it to jc doesn't help you. It just looks cryptic. Yumma CSS is for people who already think in CSS properties & want their classes to trace back to that knowledge directly, not for people learning CSS for the first time. I'm fine saying that plainly.

Where it's at

This is a solo project, three years in, still early. The docs walk through the full rule & the rest of the utilities, & the playground lets you try it without installing anything.

If you poke around & think the rule breaks somewhere, I'd genuinely like to hear where. That's more useful to me right now than a star.