隆重介紹 — Master CSS

Learn what Master CSS is, write your first classes, and choose the next guide to read.

Overview

Launch panel

Build the first screen in markup

Start with local classes, then promote repeated values into your project theme when the interface settles.

Start building

<article class="surface:raised r:lg overflow:hidden shadow:lg">    <img class="aspect-ratio:16/9 object-cover" ...>    <div class="p:lg">        <p class="text:blue text:2xs font:semibold uppercase">Launch panel</p>        <h2 class="text:strong text:md font:medium">Build the first screen in markup</h2>        <a class="bg:blue-60 bg:blue-70:hover fg:white">Start building</a>    </div></article>

Master CSS is a markup-driven CSS language and framework. This quick introduction shows the basic class syntax, the project CSS entry, the main delivery choices, and the next guides to read.

What is Master CSS?

Master CSS lets you write styling decisions in markup using CSS-like class strings, then generates the CSS those classes need.

Use it when you want the style to stay close to the element while still keeping access to real CSS features such as tokens, selectors, media queries, cascade layers, and generated stylesheets.

Each class is a small styling instruction:

• surface:raised gives the example panel a shared surface treatment.
• p:lg applies padding from the spacing scale.
• text:blue uses a theme color.
• bg:blue-70:hover changes the button background on hover.

You do not need to learn every shorthand before starting. Use the classes that read clearly, then move deeper into the syntax guides when you need more control.

Write your first class

Start with local styling in markup. This is enough for a first screen, prototype, or component draft:

<section class="grid gap:md p:lg r:lg bg:blue-60 fg:white">    <h2 class="m:0 font:2xl font:semibold">Dashboard</h2>    <p class="m:0 fg:white/.8">A compact panel styled from its class list.</p></section>

Master CSS reads those class names, validates them against the active project vocabulary, and emits CSS for the classes that are actually used.

When a value or pattern becomes shared across the product, promote it later. Repeated values usually belong in theme tokens, and repeated product roles can become component classes.

Add states and conditions

A Master CSS class can carry the condition that controls when it applies.

<button class="px:md py:xs r:md bg:blue-60 bg:blue-70:hover grid-cols:2@md fg:white">    Save</button>

Read the suffixes after the declaration:

• bg:blue-70:hover changes the background on hover.
• grid-cols:2@md applies at the md breakpoint.

The same idea extends to responsive design, dark mode, print styles, container queries, feature queries, attributes, pseudo-classes, and custom variants. Learn the pieces in Style Declarations, State Selectors, and Conditional Queries.

Add a project CSS entry

Most projects start by importing Master CSS from the stylesheet the app already loads:

@import "@master/css";

That stylesheet becomes the project CSS entry. It can later define shared styling vocabulary:

@import "@master/css";@theme {    --color-brand: #4f46e5;    --spacing-card: 1.5rem;}

<article class="p:card bg:brand fg:white">    ...</article>

Keep this simple at first. Add tokens, component classes, custom utilities, and custom variants only when the project has a repeated decision worth naming.

Choose how CSS is delivered

Master CSS uses the same class syntax across different delivery modes. Choose the mode that fits the app:

• Runtime rendering watches class names in the browser and generates CSS as elements appear or change.
• Static rendering scans source files during the build and emits CSS before deployment.
• Server or pre-rendered CSS generates CSS from rendered HTML.
• Progressive rendering sends first-page CSS early, then lets the runtime handle later dynamic classes.

You can start with the recommended setup for your framework, then revisit delivery once the project shape is clearer. See Rendering Modes when you need to compare the tradeoffs.

Keep going

If you are new to Master CSS, read these next:

1. Installation to add Master CSS to a project.
2. Style Declarations to learn how class names map to CSS.
3. State Selectors and Conditional Queries to control when styles apply.
4. Customizing your Theme when you need shared tokens, modes, variants, components, or utilities.
5. Rendering Modes when CSS delivery matters.
6. Language Service, Code Linting, and AI Coding when you want editor help, team checks, or AI-assisted styling.