You know CSS. You also know Yumma CSS.

Three years ago, I started thinking about using CSS itself as a framework, and I really liked the idea. There'd be no need for long class names or specific utilities to be memorized, and it'd sit on top of what I already knew without creating a second vocabulary.

And before you say something like, "How is this better than Tailwind?" or "Why are you trying to recreate the wheel?" just bear with me for a second, okay?

Most frameworks name things after what they do: a class for centering, a class for spacing, a class for a direction. Those names look good on their own, but they're not CSS, and they don't always link back to it cleanly. You might not even realize that you're forgetting how CSS actually looks and works.

The rule

Yumma CSS doesn't invent class names. It's based on the CSS you're already familiar with, following one simple rule:

The prefix is just the property's initials. The suffix is short for "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're already familiar with CSS properties, you'll likely get most of these right without even opening the documentation. There's no separate naming system to keep in your head along with the one you already have.

How much it'll cost you

Yumma CSS numeric scale is curated, not random. The spacing and sizing run on a fixed step of 0.25rem from 0 to 96rem, and that's it. There's no bracket syntax or w-[137px]. If the value you're looking for isn't on the scale, you won't get it.

It's also not a beginner's tool. If you don't already know what "justify-content" does, abbreviating it to "jc" won't help you. It just looks cryptic. For those of you who are already confident with CSS properties and want your classes to reflect that knowledge directly, Yumma CSS is the perfect fit. But if you're just starting out and learning CSS, it might not be the best choice for you. I'm okay with saying that out loud :)