Declarations & values

Class declarations, values, units and native property fallback.

Overview

Master CSS classes select named styles or express CSS declarations 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 type="button" class="fg-white:hover@md">Save</button>

Use a hyphen for named styles (font-mono, p-md) and a colon for direct values (font-size:16px, p:1rem). Full CSS properties retain native semantics; abbreviations replace only the property name. Values never infer a subproperty or implicitly resolve theme tokens. Use var(--name) for explicit variable references.

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%">

(o) Use built-in utility classes to simplify markup.

<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, mcss display:block becomes mcss block, and mcss position:absolute becomes mcss abs.

Not every value becomes a utility. Master CSS avoids shortcuts when the result would be ambiguous. For example, mcss font-weight:muted is not reduced to mcss 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">

(o) Use the CSS shorthand with explicit CSS units.

<p class="padding:1rem|2rem border:1px|solid|var(--color-red)">

(o) Even with abbreviations.

<p class="p:1rem|2rem b:1px|solid|var(--color-red)">

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

(o) 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.

Named styles and native shorthands

Named styles and direct declarations have separate spellings:

A property abbreviation replaces only the property name. Values never select a different subproperty: font:16px remains a native font declaration and is not a valid complete font shorthand.

CSS shorthands reset omitted subproperties. Choose an explicit longhand when that reset is not intended. outline:2px, stroke:2px, and line-clamp:3 also retain their native properties. Use outline-width:2px, stroke-width:2px, or the composite utility clamp-lines:3 for those distinct intentions.

Static names such as text-center and bg-cover remain reserved. If a project defines both a font family and a font size named brand, font-brand is ambiguous: use font-family-brand or font-size-brand. Qualified names use the longest registered prefix and never fall back to a shorter prefix when the token is missing.

Motion longhands

Animation and transition longhand declarations use their CSS property keys.

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

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

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

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:16px margin-top:32px justify-content:center">

(o) Use an abbreviation only when it is part of the curated set.

<p class="font-size: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 raw value 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">

(o) Use abbreviations common in geometry, coordinates, and CSS utility libraries.

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

(o) Use logical aliases when available, and full logical properties when there is no key alias.

<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.

(o) Write both width and height explicitly when they share the same value.

<div class="width:32px height: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;}

Use a named token when you want the project vocabulary. A colon always retains the property’s native value semantics, including when a short property alias exists.

Use {...} for one-off groups. Each item follows the same named-token or direct-value contract:

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

Generated CSS:

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

Variable properties

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

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

(o) 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="background-color:var(--button-bg) --button-bg:var(--color-red-60)">  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-sm>li:hover@md text-center>li:hover@md">…</ul>

(o) Group styles with the same states.

<ul class="{block;font-size: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!">

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.

(o) 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

Place a minus sign before a direct value, or before the complete named token class:

<div class="mt:-2rem -ml-sm"></div>

Negative token syntax requires a numeric token and a property that accepts negative values. For example, -m-sm is supported, while -p-sm is rejected because padding cannot be negative. Direct values retain native CSS validity rules.

Hexadecimal color

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

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

Value aliases and theme tokens

Named tokens use a hyphen: p-md, font-mono, and fg-red. Direct values use a colon: p:1rem, font-family:mono, and fg:red.

These forms have different identities. fg:red uses CSS red, while fg-red selects the configured color token. font-family:mono names the native font family mono; it does not look up a token. Direct declarations do not resolve token names inside functions or compound values either.

Define project tokens in CSS:

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

Then use their names:

<div class="m-card bg-primary">...</div>

Use var(--name) to combine tokens in a direct value:

<div class="m:var(--spacing-sm)|var(--spacing-md)">...</div>

There is no implicit numeric scale such as p-4: it works only if the project defines a matching token. State, query, important, and group syntax apply to both forms.

Within the same layer, condition, selector, and property priority, a direct value follows a token rule. Both p-md p:8px and p:8px p-md therefore use 8px. Shorthand/longhand and important priorities still apply; HTML class order does not decide the winner.

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-size:10vw">

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

Native CSS units

Write native CSS units explicitly. Use rem for a length relative to the root font size:

<p class="font-size:3rem">

Use px when the design calls for a fixed CSS pixel length:

<p class="font-size:48px">

These values have different behavior when the root font size changes. Master CSS preserves the unit you write and does not convert declaration values using root-size.

Bare numbers are also emitted as written. For example, font-size:48 emits font-size: 48, which is not a valid nonzero CSS length. Use an explicit unit or a named token such as font-lg.

The former Master length multiplier x and base-unit setting have been removed. See Migrating from Master CSS v2 RC to convert existing projects using their original settings. Native resolution values such as image-set(url(a.png)|1x,url(b.png)|2x) retain their CSS meaning.

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">

(o) Keep angle and time units explicit.

<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.

Native resolution and removed length multipliers

Master CSS does not define a length multiplier unit. Write a native length such as m:1rem, or select a configured spacing token such as m-md.

Native CSS still uses x for resolution. Values such as background-image:image-set(url(a.png)|1x,url(b.png)|2x) are preserved without length conversion.

For an older project using Master length multipliers, follow the v2 RC migration guide. The conversion requires that project's original base-unit and root-size; do not assume their defaults.

Functions

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

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

Reference theme variables explicitly with var(--name), including inside functions. A separate named color token can use an opacity modifier:

<div class="w:calc(100%-var(--spacing-sm)) bg-black/.5">

Colon values do not look up tokens or interpret $name shortcuts. The | character encodes a space in class values; CSS functions, quoted strings, and explicit units keep their native meaning.

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 type="button" class="bg-blue-60 transition:background-color|.2s bg-blue-70:hover@md">  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.

Continue with selectors for element states and relationships, or conditions for viewport, media, container, and layer suffixes. The syntax tutorial introduces the authoring workflow.