Naming Convention

Atomic CSS has ONE rule: take the first letter of each word in a CSS property and value, combine them, and that's your class name. Once you understand this, you can guess almost any class.

Basic Rule

For properties with keyword values (no numbers), just combine the first letters.

Properties with Units

When a CSS value includes a number and unit, append them directly after the property abbreviation.

Supported units

Hyphen (-) Usage

The hyphen character (-) serves 4 different purposes depending on context. Understanding these is essential.

1. Decimal point

Since CSS class names can't contain a dot, the hyphen replaces the decimal point.

2. Value separator (Grid)

In grid classes, hyphens separate multiple values that become spaces in CSS.

3. Media query prefix

A breakpoint prefix followed by a hyphen activates the class only at that screen size.

4. Pseudo-class prefix

Pseudo-class names followed by a hyphen apply styles on specific states.

Special Suffixes & Prefixes

i suffix = !important

Add i to the end of any class to add !important.

neg- prefix = negative value

Prefix with neg- to produce a negative value.

p = percent (%)

Use p as a unit suffix to represent %.

Disambiguation

Some abbreviations map to multiple CSS properties. The key rule: the presence or absence of a unit determines which property it refers to.

Guess ANY CSS Property

The naming convention is universal. Even if a class isn't documented, you can derive it from the rule. Here are examples across many different CSS properties:

Color Naming

Colors use a property prefix followed by the color value (HEX or RGBA).

HEX colors (6-digit)

RGBA colors

Format: {prefix}{R}-{G}-{B}-{Alpha} where Alpha is 0-100 (mapped to 0.0-1.0).

Opacity

Quick Reference

The most commonly used classes you'll memorize quickly.

<!-- Flexbox center -->
<div class="df jcc aic">centered content</div>

<!-- Flex column with gap -->
<div class="df fdc gap16px">stacked items</div>

<!-- Header: logo left, nav right -->
<header class="df jcsb aic px2rem py16px">
  <div>Logo</div>
  <nav class="df gap2rem">links</nav>
</header>

<!-- Grid 3 columns -->
<div class="dg gtcr3-1fr gap2rem">cards</div>

<!-- Responsive: 3col → 1col -->
<div class="dg gtcr3-1fr sm-gtc1fr gap2rem">cards</div>

<!-- Responsive show/hide -->
<div class="db sm-dn">desktop only</div>
<div class="dn sm-db">mobile only</div>

<!-- Hover button -->
<button class="bg6366F1 hover-bg4F46E5 cFFFFFF py12px px2rem br8px bn cp tall200msease">
  Click me
</button>

<!-- Absolute positioned overlay -->
<div class="pr">
  <div class="pa t0 l0 w100p h100p bg0-0-0-50 df jcc aic">overlay</div>
</div>

<!-- Text ellipsis (single line) -->
<p class="wsn oh toe">very long text that will be truncated...</p>

Tips

Related