Master CSS covers all native CSS features with a structured syntax and simplifies CSS with smart rules.

Overview

Hello, World!

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

Basic syntax

Semantics

Syntax: semantic

Writing the native CSS directly makes your markup verbose.

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

Use built-in semantic classes to simplify markup. ↓ 65% code

<p class="capitalize abs block round">

When the characteristics of a native CSS property can be accurately conveyed through its value alone, we utilize the value directly as a semantic class. For example, we reduce display:block to simply block.

However, we do not reduce font-weight:lighter to lighter can be too ambiguous, potentially referring to brightness rather than font-weight.

In addition, several useful semantic classes are provided, such as screen readers and text size with line height, etc.

Semantics effectively reduce markup complexity, improve readability, and maintain the intended meaning of the property.

To learn more about customizing semantics, check out the semantics documentation.

Multi-style shorthands

Syntax: property:value|value|value…

Inherit native CSS shorthands to reduce the frequency of duplication of style names in classes.

<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 and rely on smart unit conversions. ↓ 76% code

<p class="padding:16|32 border:1|solid|red">

Even with abbreviations. ↓ 89% code

<p class="p:16|32 b:1|red">

You can't use CSS whitespace in class attributes because it's used to separate different class names; use instead:

Use | delimiters instead of whitespaces between CSS parameter values.

<div class="m:10|20|30|40"></div>

Review native CSS:

div {
    margin: 0.625rem 1.25rem 1.875rem 2.5rem
}

Master CSS Syntax Highlighting uses light gray to reduce the contrast of the | delimiter, making it visually smoother and closer to the native CSS whitespace delimiter .

Ambiguous shorthands

Syntax: property-name:value → property:value

Native CSS shorthands combine multiple properties for quick declaration, and there is no shorthand for a single property.

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

Use ambiguous shorthand and rely on smart unit conversions. ↓ 38% code

<p class="text:center font:16 font:bold border:solid">

From the example above:

• By recognizing the keywords text and center, the expression text:center can be disambiguated as text-align:center.
• By recognizing the keywords font and 16, the expression font:16 can be disambiguated as font-size:1rem.
• By recognizing the keywords font and bold, the expression font:bold can be disambiguated as font-weight:bold.
• By recognizing the keywords border and solid, the expression border:solid can be disambiguated as border-style:solid.

The ambiguity shorthand of Master CSS allows style declarations to be trimmed to shorten classes and even disambiguate to explicit properties instead of shorthand, preventing the overriding behavior of shorthand.

For example, the font size font:16 is not translated to the native font shorthand font:.

Symbol shorthands

Syntax: property-name:value → symbolvalue

Use ~ and @ as derivative symbols for transition and animation to make class declarations more elegant.

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

Use derivative symbols specific to Master CSS. ↓ 43% code

<div class="@fade|1s|ease ~opacity|3s">

Related properties also work: property-name:value → symbolname:value

<div class="animation-name:fade transition-property:transform">

Reduce animation-* and transition- to @* and ~*. ↓ 39% code

<div class="@name:fade ~property:transform">

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

Property abbreviations

Syntax: property-name:value → pn:value

Property names are still too long on class names?

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

Use the first letter for an abbreviation. ↓ 61% code

<p class="f:16 mt:32 jc:center">

Using abbreviations depends on team conventions or personal habits. Not every style property supports abbreviations, but some sensible abbreviations are recommended.

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

Use abbreviations common to the math field and CSS utility libraries. ↓ 64% code

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

Even use x, y to express direction. ↓ 73% code

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

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

Use size:w|h to simplify it further! ↓ 75% code

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

Utilizing abbreviations can significantly reduce template markup and provide greater flexibility and faster iteration.

Arbitrary properties

Syntax: {property:value}

Master CSS allows you to use non-standard or unsupported CSS properties, using {} curly braces like native CSS declarations.

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

Generated CSS:

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

Variable properties

You can't declare CSS variables with the state through inline styles.

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

Declare CSS variables based on any state.

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

Generated CSS:

.light {
    --red: 229 46 46
}
 
.dark {
    --red: 247 63 63
}
 
.\$color\:red\:hover:hover {
    --color: rgb(var(--red))
}
 
@media (min-width:834px) {
    .\$size\:5rem\@sm {
        --size: 5rem
    }
}

Group

Sometimes, you need to apply the same styles across multiple selectors or media queries, where the grouping syntax brings joy to you.

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

Group styles with the same states. ↓ 36% code

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

Important

Syntax: property:value!

Declare !important for a style by marking it with !.

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

Values

Decimal

In many cases, the precision and flexibility of traditional utility classes are often insufficient.

Use math such as 0.5 in class attributes.

<div class="opacity:.5">

Negative

Apply negative values:

<div class="mt:-32">

Hexadecimal color

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

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

Units

Syntax: property:valueunit

All CSS units are allowed: px, em, %, ex, ch, rem, vw, vh, vmin, vmax, cm, mm, in, pt, pc, ms, s, deg, etc.

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

Unit conversion

Do you frequently check the reference table for rem to px when writing CSS?

<p class="font:3rem">

Measure in pixels and rely on conversion behavior to rem. ↓ 22% code

<p class="font:48">

The 48 without specified units is translated to pixels and is converted to a browser-friendly 2rem when generating CSS rules.

We've predefined practical units and conversion behavior based on the characteristics of different style properties, and most of them involve converting from px to rem.

You can easily associate the default behavior with the property's characteristics.

Unit sensing

Writing CSS units in a class seems a little weird.

<p class="rotate(30deg) @duration:200ms">

Omits the unit mark. ↓ 17% code

<p class="rotate(30) @duration:200">

When rotation transform is applied without specified units, it will be interpreted as deg rather than invalid px based on consensus.

Similarly, time properties without units are translated to ms, and you can also use decimal values like .2s.

Multiplier units

Using multiplier units determines the spacing/size scale and ensures visual consistency.

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

Functions

Declare native functions directly; that's how flexible it is.

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

Rely on unit conversions and variable syntax. ↓ 12% code

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

Variables

Applying certain property values ​​is often not so concise in class attributes.

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

Use variables to simplify primitive values and ambiguous shorthands. ↓ 52% code

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

By default, Master CSS uses predefined variables to simplify native values. You can customize variables to implement your design system, for example:

import { variables } from '@master/css'
 
export default {
    variables: {
        'font-family': {
            sans: 'Inter'
         },
        screen: { desktop: 1280 },
        spacing: { sm: 10 },
        primary: '
#000000'
    }
}

Apply custom variables using ambiguous shorthand:

<div class="font:sans max-w:screen-desktop m:sm bg:primary">…</div>

RGB color

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

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

HSL color

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

<p class="fg:hsl(219|83%|50%)">Aa</p>