{"slug": "if-you-know-css-you-already-know-yumma-css", "title": "If You Know CSS, You Already Know Yumma CSS", "summary": "A developer created Yumma CSS, a utility-first CSS framework that derives class names directly from CSS properties and values, eliminating the need to learn a separate naming vocabulary. The framework uses a mechanical rule to abbreviate properties like `display: flex` to `.d-f` and `align-items: center` to `.ai-c`, targeting developers who already know CSS. It features a curated numeric scale for spacing and sizing, intentionally limiting arbitrary values to promote consistency.", "body_md": "Tailwind's class names are readable. `items-center`\n\ntells you what it does. But it's not CSS. It's Tailwind's own name for `align-items: center`\n\n, & that name doesn't always trace back cleanly. `gap-x-4`\n\nreads fine, but `gap-x`\n\nisn't a CSS property. `column-gap`\n\nis. Same with `shrink-0`\n\nfor `flex-shrink: 0`\n\n, or `flex-col`\n\nfor `flex-direction: column`\n\n. Every one of these is something you learn on top of CSS, not something CSS already taught you.\n\nI didn't want a second vocabulary. I wanted the one I already had to be enough. Three years ago that turned into Yumma CSS.\n\nYumma CSS doesn't invent class names. It derives them from the CSS you already know, using one mechanical rule:\n\n``` php\n/* display: flex;                  -> */ .d-f { … }\n/* justify-content: space-between; -> */ .jc-sb { … }\n/* align-items: center;            -> */ .ai-c { … }\n/* flex-direction: column;         -> */ .fd-c { … }\n/* column-gap: 1rem;               -> */ .cg-4 { … }\n/* margin-top: 1rem;               -> */ .mt-4 { … }\n```\n\nIf 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.\n\nI'm not going to pretend this is free.\n\nYumma's numeric scale is curated, not arbitrary. Spacing & sizing run on a fixed `0.25rem`\n\nstep from `0`\n\nto `96rem`\n\n, & that's it. There's no bracket syntax, no `w-[137px]`\n\n. 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.\n\nIt also means this isn't a beginner's tool. If you don't already know what `justify-content`\n\ndoes, abbreviating it to `jc`\n\ndoesn'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.\n\nThis isn't an argument that Tailwind is worse. Its naming is genuinely good: readable, consistent, easy to skim. It's just a different design goal. Tailwind optimizes for names that read well on their own; Yumma CSS optimizes for names that map directly onto the property & value they produce. Both are reasonable things to want. I just happen to want the second one, for myself & for anyone else who'd rather not maintain two mental models of \"what makes a margin.\"\n\nThis is a solo project, three years in, still early. The [docs](https://www.yummacss.com/docs) walk through the full rule & the rest of the utilities, & the [playground](https://play.yummacss.com) lets you try it without installing anything.\n\nIf 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.", "url": "https://wpnews.pro/news/if-you-know-css-you-already-know-yumma-css", "canonical_source": "https://dev.to/rrenildopereiraa/if-you-know-css-you-already-know-yumma-css-2dbo", "published_at": "2026-06-29 08:19:59+00:00", "updated_at": "2026-06-29 08:26:59.132535+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["Yumma CSS", "Tailwind CSS"], "alternates": {"html": "https://wpnews.pro/news/if-you-know-css-you-already-know-yumma-css", "markdown": "https://wpnews.pro/news/if-you-know-css-you-already-know-yumma-css.md", "text": "https://wpnews.pro/news/if-you-know-css-you-already-know-yumma-css.txt", "jsonld": "https://wpnews.pro/news/if-you-know-css-you-already-know-yumma-css.jsonld"}}