# Naming Convention

How Yumma CSS class names map to CSS property names.

## The Rule

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

```md
display: flex;                   /* d:f   */
justify-content: space-between;  /* jc:sb */
text-transform: uppercase;       /* tt:u  */
```

Every class resolves to exactly one property.

## Values

Numbers & scales keep their position instead of their initials.

```tsx
<div className="p:4 fs:lg fw:600 zi:10 …"></div>
```

`none` & `auto` are never abbreviated. Every other value shortens to its initials, but these two keep their full spelling in every utility that accepts them. Reserving both words stops them colliding with the initials of other values under a shared prefix.

```tsx
<div className="d:none pe:auto ob:none sb:auto …"></div>
```

The rule holds everywhere, including `tt:none` for `text-transform: none` & `tl:auto` for `table-layout: auto`.

## Shared Prefixes

CSS has more properties than there are short letter pairs, so a few prefixes serve more than one property. The value tells them apart.

| Class | Property |
| - | - |
| `o:50` | `opacity` |
| `o:h` | `overflow` |
| `p:4` | `padding` |
| `p:a` | `position` |
| `c:white` | `color` |
| `c:p` | `cursor` |

The two value sets never overlap, so no class is ambiguous.

## Exceptions

`block-size` & `inline-size` use their axis, because `bs` & `is` were already taken.

| Class prefix | Property |
| - | - |
| `ys` | `block-size` |
| `xs` | `inline-size` |

A shared prefix also limits what can be added later. `color-scheme` ships `cs:l`, `cs:d` & `cs:ld`, but not `normal`, because `cs:n` is already `corner-shape: notch`.