New

Uniform CSS has now been officially released!
Read more


Naming Principles

How properties are named for scale and consistency.


Naming Principles

Due to the immutable and low-level nature of utility classes, Uniform takes a careful and considered approach to how each shorthand and variants are named to ensure they are consistent and easy to remember.


Principles we follow

The following is a list of principles Uniform follows when considering how properties and its variants are named.

1. Make use of verbose values

If the property values are verbose, self explanatory, and non-conflicting, then use the value as the shorthand.

.block { display: block; }
.ease-in-out { transition-timing-function: ease-in-out; }
.underline { color-decoration: underline; }
...

2. Truncate long property names

If the property name include words that can be shortened without confusion, shorten it.

.bg-black: { background-color: black; }
.bg-white: { background-color: white; }
...

3. Remove hyphenation

If the word is hyphenated but can be elegantly combined, remove hyphenation e.g. wordbreak and whitespace instead of word-break and white-space.

.wordbreak-normal: { word-break: normal; }
.whitespace-normal: { white-space: normal; }
...

4. Single-letter shorthands

Single-characters are only reserved for directions and width, height, margin, and padding properties e.g. w, h, m, p. For single letter properties, don't separate direction using a delimiter. For example, use mr for margin right instead of m-r.

.w-1: { width: 0.25rem; }
.p-2: { padding: 0.5rem; }

.mr-1: { margin-right 0.25rem; }
.mb-1: { margin-bottom 0.25rem; }
...

5. Single characters for directions

Common directional properties such as top, right, bottom, and left are represented with the first letter of the direction e.g. border-t for border-top etc. For multiple direction, combine the direction letters e.g. tr for top-right.

.radius-tl-sm. { border-top-left-radius: 0.25rem; }
.radius-tr-sm. { border-top-right-radius: 0.25rem; }
...

6. Simplify properties names

Simplify the property name to its most essential and ideal denominator, provided it does not cause confusion or conflict with others properties in the same family.

.text-left { text-alignt: left; }
.font-xl { font-size: 1.25rem; }
...

When dealing with multi-word properties such as line-height, simplifying it to just height or line would misrepresent the meaning and cause confusion. In this case, use a different industry term such as leading instead.

7. Append unit as characters

Whenever conflicting situations arise, over-qualify the unit by appending an abbreviated characters that represent the unit. All negative values are suffixed with n, (short for negative).

50p: 50%,
n50p: -50%,
100p: 100%, // p for percent
n100p: -100%,

100vw: 100vw, // vw for viewport width
100vh: 100vh, // vw for viewport width
...