Philosophy

Why Yumma CSS maps class names directly to CSS properties.

Abbreviations, not aliases

Most utility frameworks introduce a vocabulary layer. Class names represent CSS values through human-readable aliases.

<!-- 60 chars -->
<div class="inline-flex items-center mbs-6 ml-4 text-black font-semibold">Blog</div>

<!-- 35 chars -->
<h1 class="d-if ai-c mbs-6 ml-4 c-black fw-600">Blog<h1>

With abbreviations, you already know CSS, the class name is just an abbreviation of what you already know.

About semantics

Semantic frameworks optimize for readability, font-semibold reads very naturally. But readability comes at a cost: you need to memorize a separate vocabulary on top of CSS. font-semibold doesn't tell you it's font-weight: 600. items-center doesn't tell you it's align-items, and so on and so forth.

The abbreviation mental model tries to be a set of consistent and predictable micro patterns. Once you know that jc is justify-content and c is center, you know jc-c forever, and you also know jc-fe (flex-end), jc-sb (space-between), and every other value without looking anything up.

There is no vocabulary to memorize on top of CSS. There is only CSS, abbreviated.

How does it works?

Every class in Yumma CSS maps to exactly one CSS property.

.ai-c {
  align-items: center;
}

.c-white {
  color: #ffffff;
}

.d-f {
  display: flex;
}

.fw-600 {
  font-weight: 600;
}

Smaller markup, same output

Fewer characters per class means less noise in your markup. This also means smaller bundles.

// 1.1kB
<button class="px-3 py-2 bg-indigo h:bg-indigo-8 bc-indigo-7 c-white br-md bw-1 fw-600 c-p">
  Add to Cart
</button>

When Yumma CSS fits

  • You know CSS well and want class names that reflect it directly.
  • You prefer explicit values (fw-600) over semantic aliases (font-semibold).
  • You want predictable output without indirections.
  • You're building a design system where consistency and transparency matter.
  • You want a smaller, faster mental model.

When it may not fit

  • You rely heavily on a large pre-built component ecosystem.
  • Your team is deeply familiar with another framework's vocabulary and the switching cost outweighs the benefit.
  • You need official multi-framework UI kits out of the box.