Learn how Master CSS turns class names into CSS declarations, values, units, functions, variables, and shorthands.

Overview

Hello, World!

<div class="transform:scale(1.1):hover transition:transform|.2s">    <img class="untouchable" … />    <div class="abs animation:flash|3s|infinite mix-blend-mode:overlay height:fit inset:0 m:auto">        <h1 class="fg:white font:7vw font:40px@xs font:heavy text-center">            Hello, World!        </h1>    </div></div>

Master CSS classes are CSS declarations written directly in markup. Read each class from left to right: start with the style you want, then add optional state selectors and optional conditional queries.

<button class="fg:white:hover@md">Save</button>

The examples in this guide start with explicit CSS-like declarations, then show how to shorten them with utilities, shorthands, abbreviations, variables, and explicit units. Common native properties such as spacing, sizing, radius, color, and timing can still use Master CSS tokens and multiplier units, while rare CSS properties can use valid native declaration syntax directly. When you are learning a new class, write the explicit form first. Once the output is clear, use the shorter form that still reads well to your team.

Basic syntax

Utilities

Syntax: utility

The most explicit form is a native property name plus a value. It is easy to understand, but it can make markup noisy when the same common properties appear everywhere.

<p class="text-transform:capitalize position:absolute display:block border-radius:50%">

Use built-in utility classes to simplify markup. ↓ 47% code

<p class="capitalize abs block round">

When the meaning is still clear without the property name, Master CSS can use the value itself as a default utility. For example, display:block becomes block, and position:absolute becomes abs.

Not every value becomes a utility. Master CSS avoids shortcuts when the result would be ambiguous. For example, font-weight:muted is not reduced to lighter, because lighter could also sound like a color or brightness change.

Several utilities are also higher-level conveniences, such as screen readers and text size classes that include line-height decisions.

Use utilities when the shorter class still communicates the intended CSS. Keep the explicit property form when the shortcut would make a reader stop and guess.

To learn more about project-specific utility classes, see custom utilities.

Multi-style shorthands

Syntax: property:value|value|value…

Use the same value order as native CSS shorthands, but replace spaces with | so the class attribute still contains one class name.

<p class="padding-top:1rem padding-bottom:1rem padding-left:2rem padding-right:2rem border-width:.0625rem border-color:red border-style:solid">

Use the CSS shorthand with explicit or multiplier units. ↓ 73% code

<p class="padding:4x|8x border:1px|solid|red">

Even with abbreviations. ↓ 79% code

<p class="p:4x|8x b:1px|solid|red">

Class attributes use whitespace to separate class names, so a value like 10 20 30 40 must be written with a delimiter.

Use | delimiters instead of whitespaces between CSS parameter values.

<div class="m:1rem|2rem|3rem|4rem"></div>

Review native CSS:

div {    margin: 1rem 2rem 3rem 4rem}

The delimiter does not change the CSS shorthand rules. Keep the same top, right, bottom, and left order you would use in CSS.

Master CSS syntax highlighting uses low-contrast styling for |, so shorthand values stay close to the feel of native CSS whitespace.

Ambiguous shorthands

Syntax: property-name:value -> property:value

Native CSS shorthands usually combine several longhand properties. Master CSS also has shorter names for single declarations when the property and value together make the target property clear.

<p class="text-align:center font-size:16px font-weight:bold border-style:solid">

Use context-aware shorthands and semantic static utilities. ↓ 30% code

<p class="text-center font:16px font:bold b-solid">

From the example above:

• text-center is the semantic utility for text-align:center.
• font:16px resolves to font-size:16px because numeric font values are treated as font sizes.
• font:bold resolves to font-weight:bold because bold is a font weight value.
• b-solid is the semantic utility for border-style:solid.

This keeps classes short while still generating explicit CSS properties. It also avoids accidental resets from native shorthand behavior, where omitted subproperties can be reset to their initial values.

For example, font:16px is not translated to the native font shorthand. It generates font-size, which is usually what the class author intended.

Motion longhands

Animation and transition longhand declarations use their CSS property keys.

<div class="animation-name:fade animation-duration:1s transition-property:opacity">

Animation and transition shorthand declarations also keep the explicit property key:

<div class="animation:fade|1s|ease transition:opacity|3s">

To learn more, check out the animation and transition documentation.

Property abbreviations

Syntax: property-name:value -> alias:value

Property names can still be long after you learn the syntax. Master CSS keeps a small curated set of abbreviations for common geometry, spacing, color, and typography patterns.

<p class="font-size:1rem margin-top:32px justify-content:center">

Use an abbreviation only when it is part of the curated set. ↓ 17% code

<p class="font:16px mt:32px justify-content:center">

Use full property names for rare CSS properties. Valid native declarations can be written directly without waiting for a built-in abbreviation.

Retained abbreviations canonicalize to full property keys, so the same token and unit behavior works whether you write w:32px or width:32px.

<div class="width:32px height:32px border-radius:5px z-index:10 margin-top:1px margin-bottom:1px padding-left:1px padding-right:1px">

Use abbreviations common in geometry, coordinates, and CSS utility libraries. ↓ 38% code

<div class="w:32px h:32px r:5px z:10 mt:1px mb:1px pl:1px pr:1px">

Use logical aliases when available, and full logical properties when there is no key alias. ↓ 77% code

<div class="w:32px h:32px r:5px z:10 my:1px px:1px">

• Geometry: w width, h height, r radius.
• Coordinates: x axis, y axis, z axis.
• Spacing: m margin, p padding.
• Directions: t top, b bottom, l left, r right, usually after a spacing prefix like mt, pb, or pr.
• Radius sides and corners: rt, rb, rl, rr, rtl, rtr, rbl, and rbr.

Use size:* when width and height share the same value. ↓ 83% code

<div class="size:32px r:5px z:10 my:1px px:1px">

Abbreviations reduce template size, but the goal is still readable markup. Mix explicit and abbreviated declarations as needed.

Native declaration fallback

Syntax: property:value

Supported native CSS declarations can be written directly as property:value, even when they are not listed as built-in utilities. Use this form first for platform properties that already have valid CSS grammar.

<div class="float:left field-sizing:content">

Generated CSS:

.float\:left {    float: left;}.field-sizing\:content {    field-sizing: content;}

Prefer built-in utilities when they exist, because they can include token resolution, aliases, sorting, and shorthand behavior.

Use {...} for an explicit raw escape hatch or for one-off declaration groups:

<div class="{block-size:5rem;inline-size:5rem}">

Generated CSS:

.\{block-size\:5rem\;inline-size\:5rem\} {    block-size: 5rem;    inline-size: 5rem;}

Variable properties

Inline styles can declare CSS variables, but they cannot respond to selectors or queries.

<div style="--color: red; --size: 5rem">

Use --<name>:<value> when a variable needs the same selector and query power as any other Master CSS declaration.

<div class="--color:red:hover --size:5rem@sm">

Generated CSS:

@layer utilities {    .--color\:red\:hover:hover {        --color: red    }    @media (width>=52.125rem) {        .--size\:5rem\@sm {            --size: 5rem        }    }}

Use the variable from another declaration with native CSS var().

<button class="--button-bg:red-60 bg:var(--button-bg)">    Save</button>

This is useful for component internals: set a variable in one state, then let child declarations, shadow parts, or native component CSS consume the same custom property.

.button {    background: var(--button-bg);}

Group

When several declarations share the same selector or query suffix, group the declarations first and write the suffix once.

<ul class="block>li:hover@md font:0.875rem>li:hover@md text-center>li:hover@md">…</ul>

Group styles with the same states. ↓ 3% code

<ul class="{block;font:14px;text-center}>li:hover@md">…</ul>

Inside {...}, separate declarations with semicolons. After the closing }, append selectors and conditional queries exactly as you would on a single declaration.

Important

Syntax: property:value!

Add ! at the end of the declaration value to emit !important.

<div class="text-center! text-left">

Use it as a last resort for integration boundaries or unavoidable third-party CSS. For normal Master CSS classes, cascade layers and rule priority usually give you a cleaner override path.

Values

Decimal

Use decimals directly when a CSS value needs precision that a fixed utility scale would not provide.

Write decimal values in class attributes.

<div class="opacity:.5">

Leading zeros are optional for decimal values, so opacity:.5 and opacity:0.5 represent the same idea.

Negative

Put - before the value when a property accepts negative values.

<div class="mt:-8x">

The property still controls whether the value is valid. Negative spacing is useful for offsets, but not every CSS property accepts negative input.

Hexadecimal color

Change the text color of an element using the hexadecimal color code.

<p class="fg:#175fe9">Aa</p>

Variable alias

Some native values are descriptive but long in markup, especially when they appear in every component.

<p class="width:fit-content box-sizing:border-box flex-direction:column">

Use variable aliases and ambiguous shorthands to keep the same meaning with fewer characters. ↓ 27% code

<p class="width:fit border-box flex-col">

Master CSS ships with predefined theme tokens for common primitive values. You can also define theme tokens for your own design system, then use semantic values instead of repeating raw CSS values.

@theme {    --spacing-sm: 0.625rem;    --color-primary: #000000;}

Apply custom tokens using contextual shorthand:

<div class="m:sm bg:primary">...</div>

Units

Syntax: property:valueunit

Use native CSS units whenever the value should stay explicit: px, em, %, ex, ch, rem, vw, vh, vmin, vmax, cm, mm, in, pt, pc, ms, s, deg, and more.

<div class="w:50% font:10vw">

If you omit the unit, the number is emitted as written. Use explicit native units, theme tokens, or the x multiplier unit when the CSS value needs a length, angle, time, or other unit.

Unit conversion

Use the x unit when a value should follow the project base-unit rhythm and emit rem.

<p class="font:3rem">

Use multiplier units instead of relying on implicit numeric conversion. ↓ 10% code

<p class="font:12x">

With the default base-unit: 4, 12x becomes 3rem.

Bare numbers are emitted as written. For example, font:48 emits font-size: 48, not 3rem; for a valid length use font:3rem or font:12x.

Use explicit units when you need to preserve a value exactly as written.

Unit sensing

Master CSS does not guess property-specific units for bare numbers. Write the unit when the CSS value needs one.

<p class="rotate:30deg animation-duration:200ms">

Keep angle and time units explicit. ↓ 5% code

<p class="rotate:30deg animation-duration:.2s">

rotate:30 emits rotate: 30, which is not a valid angle in normal CSS. Use rotate:30deg.

Likewise, timing values should include ms or s, such as animation-duration:200ms or animation-duration:.2s.

Multiplier units

Use multiplier units when a value should follow the theme spacing and size rhythm.

<div class="m:4x"></div>

Generated CSS:

.m\:4x {    margin: 1rem; /* 4x = 4*4 = 16px, 16px / 16 = 1rem */}

By default, the multiplier base unit is 4, so 4x means 16px before conversion. This makes repeated spacing values consistent without forcing you to create a named token for every small step.

Functions

Write native CSS functions directly when that is the clearest expression of the value.

<div class="w:calc(100%-1rem) h:var(--size-sm) bg:rgba(0,0,0,.5)">

Combine functions with multiplier units, token shortcuts, and variable syntax. ↓ 20% code

<div class="w:calc(100%-4x) h:$size-sm bg:black/.5">

Inside functions, Master CSS still resolves the parts it understands. For example, 4x follows the project base-unit scale, $size-sm references a CSS variable, and color opacity syntax like black/.5 stays compact.

rgb(), hsl(), oklch(), ...

Change the text color of an element using color functions like rgb(), hsl(), oklch(), and others.

<p class="fg:rgb(23,95,233)">Aa</p>

Combine with states and queries

After the declaration itself is clear, you can attach selectors and conditions without changing the declaration syntax.

<button class="bg:blue-60 bg:blue-70:hover@md transition:background-color|.2s">    Save</button>

This means:

• bg:blue-60 applies by default.
• bg:blue-70:hover@md applies only when the button is hovered and the viewport matches @md.
• transition:background-color|.2s adds a background-color transition.

The rest of the syntax tutorial builds on this model: declarations first, then selectors, then queries.