Getting Started

An enhanced and structured CSS syntax for class names.

A complete tutorial and feature overview of style variants, states, selectors, media queries and use cases for Master CSS syntax.

Introduction

To help you shorten and speed up your code output in an intuitive way, we've designed a structured syntax close to native CSS.

Composability of styles

Compose styles like Lego without the burden of naming, instead of constraining the flexibility of styles through abstract class names at the outset.

Hello, World!

<div class="rel">
    <img class="aspect:480/319 untouchable" src="/images/landscape-mobile-screen.png" alt='hello world' />
    <h1 class="abs blend:overlay text:center font:7vw font:40@xs font:heavy font:white inset:0 m:auto h:fit @flash|3s|infinite ">
        Hello, World!
    </h1>
</div>

Multi-state style variants

All styles and properties in Master support selectors and media queries. You can specify multiple conditions and states at the same time.

<div class="bg:gray-90:hover@dark@md hidden@print left:16@sm&<md">...</div>

Attaching states is like making a sentence.

Fill the button background with blue on hover at viewport width >=1024px.

After keeping only the underlined parts:

button bg blue hover viewport width >=1024px

Transform above to HTML sequentially:

<button class="bg:blue:hover@md"></button>

and auto-generated CSS looks like:

@media (min-width:1024px) {
    .bg\:blue\:hover\@md:hover {
        background-color: #175fe9
    }
}

That's it. You have almost learned how to use Master CSS!

Symbol	Design Concept
`\|`	Use the delimiter `\|` to proxy spaces between native CSS property values. Make each value have a separate meaning.

Symbol	Design Concept
`@`	Wouldn't it makes sense to evolve from `@keyframes fade { ... }` to `@fade`?
`~`	Doesn't the curve of the `~` symbol seems to imply a transition?

The Group is one of our key features since ^1.15.0. It helps you to group styles with the same suffixes of selectors, media queries, etc., preventing class names from growing in length and quantity.

Without grouping, your code would look like:

<ul class="block>li:hover@md width:fit>li:hover@md text:center>li:hover@md font:24>li:hover@md font:blue/.5>li:hover@md"></ul>

Now group. ↓ 43% code

<ul class="{block;width:fit;text:center;font:24;font:blue/.5}>li:hover@md"></ul>

Symbol	Design Concept
`{}`	Use the same curly braces as native to group properties and styles into one CSS rule.
`;`	Use the same semicolon as native to separate properties and styles.

If you care about output sizes, you have to consider whether the target styles you're grouping are highly reused elsewhere. If this is the case, the final CSS rule size will be slightly higher.

We recommend that you prioritize the development experience, as the differences won't be significant and you can optimize them later.

Pseudo-classes

Hover, active, and focus

Try clicking the button to see states change

<button class="bg:indigo bg:indigo-54:hover bg:indigo-58:active outline:indigo-80|3|solid:focus ...">
    Submit
</button>

First, last, and Nth

Select and style elements using :first, :last, :odd, :even, and :nth(N) shorthands.

Dressing Table
$980
A dress-up space.
Double Bed
$1,820
A sweet moment for everyone.
Sofa
$4,850
A place to be lazy all day.
Cabinet
$1,250
Secrets are hidden here.
Desk
$2,580
A good partner in the office.
Mirror
$530
Discover your own beauty.

<ul class="list-style:none ...">
    {furnitures.map((furniture, index) =>
        <li class="bb:0:last bg:fade-94:even bb:1|solid|fade-88 ..." key={index}>
            <img class="round object:cover" src={furniture.url} layout="fixed" width="56" height="56" alt="avatar" quality={'0'} />
            <div class="flex flex:col flex:1 py:10">
                <div class="flex align-items:center">
                    <div class="text:14 capitalize ...">{furniture.name}</div>
                    <div class="text:14 ml:auto">${furniture.price}</div>
                </div>
                <div class="text:14 m:0 font:fade font:gray-60@dark">{furniture.intro}</div>
            </div>
        </li>
    )}
</ul>

For more details and a complete list, check out the Selector Reference.

Form validations and states

Select and style form elements using :disabled, :invalid, :required, etc.

Password

<div class="font:14 font:medium">Email</div>
<input type="email" value="aron@master..."/>
<div class="font:14 font:medium mt:20">Password</div>
<input class="opacity:..." disabled type="password" value="1234567890" autoComplete="off" />

For more details and a complete list, check out the Selector Reference.

Pseudo-elements

Before and after

Attach pseudo-elements to an element using :before and :after.

2,000

<span class="content:'$':before content:'USD':after ls:-.3 font:medium">
    <strong class="font:32 font:bold mx:4">2,000</strong>
</span>

For more details and a complete list, check out the Selector Reference.

Placeholder and text selection

Change the placeholder and selection color of elements using ::placeholder and ::selection.

Try selecting the text of div

Enter the correct Email, the verification code will be sent here.

<input class="font:fade-60::placeholder font:gray-40::placeholder@dark b:1|solid|fade-88 bg:white r:5 mt:5 w:full h:48 px:16 b:gray-28@dark bg:gray-22@dark" type="email" placeholder="Enter your email" />
<div class="bg:red::selection font:white::selection font:fade-40 font:gray-70@dark font:12 mt:10">Enter the correct Email, the verification code will be sent here.</div>

For more details and a complete list, check out the Selector Reference.

Beautify your scrollbar

Style the scrollbar of an element using ::scrollbar, ::scrollbar-thumb, ::scrollbar-track, ::scrollbar-button, ::scrollbar-corner and ::scrollbar-track-piece shorthand. We've automatically prefix them with -webkit- for you.

Try scrolling horizontally and interact with the scroll bar.

<div class="
    {w:6;h:6;rounded}::scrollbar
    bg:fade-86::scrollbar-thumb
    bg:fade-76::scrollbar-thumb:hover
    bg:fade-66::scrollbar-thumb:active
    bg:gray-30::scrollbar-thumb@dark
    bg:gray-40::scrollbar-thumb:hover@dark
    bg:gray-50::scrollbar-thumb:active@dark
    bg:transparent::scrollbar-corner
    rounded::scrollbar-thumb
    overflow-x:auto p:40
">
    <div class='flex w:max'>
        {animals.map((animal) =>
            <div class="flex:0|0|156" key={animal.name}>
                <img src={animal.url} width={156} height={156} alt={animal.name} />
            </div>
        )}
    </div>
</div>

For more details and a complete list, check out the Selector Reference.

State selectors

Apply styles on .active

Style elements based on .active, .disabled and other custom class states.

<nav class="flex bb:1|solid|fade-88 ...">
    <a class="{color:indigo!;bb:2|solid}.active ...">Home</a>
    <a class="{color:indigo!;bb:2|solid}.active ... active">Product</a>
    <a class="{color:indigo!;bb:2|solid}.active ...">Team</a>
    <a class="{color:indigo!;bb:2|solid}.active ...">About</a>
    <a class="{color:indigo!;bb:2|solid}.active ...">Contact</a>
</nav>

For more details and a complete list, check out the Selector Reference.

Apply styles on [open]

Style elements based on [open], [type=date] and other custom attribute states.

Try toggling the disclosure widget to see styles change

Why not inline styles?

Inline styles cannot apply selectors, media queries, and many CSS features. With Master CSS, you can now implement them with the most succinct syntax.

<details open class="outline:1|solid|fade-88[open] bg:white[open] bg:gray-22[open]@dark outline:gray-28[open]@dark max-w:480 r:5 w:full">
    <summary class="cursor:pointer font:medium p:20">
        Why not inline styles?
    </summary>
    <div class="p:0|35|20 mt:-10">
        <p class="font:14 my:0">
            Inline styles cannot apply selectors, media queries, and many CSS features. With Master CSS, you can now implement them with the most succinct syntax.
        </p>
    </div>
</details>

For more details and a complete list, check out the Selector Reference.

Relationship selectors

Style all descendants at once

Deeply style all descendant elements/nodes at once. This is useful for typography, de-duplication styles, and dynamic content, etc.

Style all descendants at once

Heavy boxes perform quick waltzes and jigs. Heavy boxes perform quick waltzes and jigs.

Heavy boxes perform quick waltzes and jigs. Heavy boxes perform quick waltzes and jigs.

Heavy boxes perform quick waltzes and jigs. Heavy boxes perform quick waltzes and jigs.

<article class="font:30_h1 font:18!_:where(p) text-decoration-color:indigo!_u mb:0_p:last ...">
    <h1>Style all descendants at once</h1>
    <p>Heavy boxes <u>perform</u> quick waltzes and jigs. Heavy boxes <u>perform</u> quick waltzes and jigs.</p>
    <blockquote>
        <p>Heavy boxes perform quick waltzes and jigs. Heavy boxes perform quick waltzes and jigs.</p>
    </blockquote>
    <p>Heavy boxes perform quick waltzes and jigs. Heavy boxes perform quick waltzes and jigs.</p>
</article>

Selecting the style of descendant elements and presetting the style with :where() CSS pseudo-class reduces the priority of selected descendants. This can solve specificity issues, such as subsequent styling of child elements/nodes must rely on !important .

Symbol	Design Concept
`_`	Using underscore `_` to proxy spaces in native CSS descendant selectors. The word "under" in "underscore" can be interpreted to imply the selecting of elements/nodes under the target.

For more details and a complete list, check out the Selector Reference.

Style the following children

Only style the next-level child elements.

L1
- L2
- L2
L1

<ul class="font:crimson-60!>li>p font:heavy ...">
    <li>
        <p>L1</p>
        <ul>
            <li> <p>L2</p> </li>
            <li> <p>L2</p> </li>
        </ul>
    </li>
    <li> <p>L1</p> </li>
</ul>

For more details and a complete list, check out the Selector Reference.

Style a sibling behind

Use + to style an element after a specific element.

Try toggling the checkbox to see element changes behind

½ teaspoon red chili powder (adjust to taste)

<label class="inline-flex center-content">
    <input class="text:line-through:checked+span cursor:pointer h:16 mr:8 w:16" type="checkbox" checked />
    <span>½ teaspoon red chili powder (adjust to taste)</span>
</label>

For more details and a complete list, check out the Selector Reference.

Style all siblings behind

Use ~ to style all elements after a specific element.

All fruit behind the apple are shrunk

<div class="overflow-x:auto p:40">
    <div class='width:64>*~div flex w:max gap:20 align-items:end'>
        {fruits.map((animal) =>
            <div class="flex:0|0|156" key={animal.name}>
                <img src={animal.url} width={96} height={96} alt={animal.name} />
            </div>
        )}
    </div>
</div>

For more details and a complete list, check out the Selector Reference.

Style an element based on target state

Reactive Styles is one of our key features. You can style not only based on parent state but also sibling state, when it is more sensible to attach styles to the reactive target itself.

Toggle the checkbox to see the target element react

½ teaspoon red chili powder (adjust to taste)

<label class="inline-flex center-content">
    <input class="cursor:pointer h:16 mr:8 w:16" type="checkbox" checked />
    <span class=":checked+{text:line-through}">½ teaspoon red chili powder (adjust to taste)</span>
</label>

Here is another example based on parent state.

Try toggling the disclosure widget to see descendants reaction

Why not inline styles?

Inline styles cannot apply selectors, media queries, and many CSS features. With Master CSS, you can now implement them with the most succinct syntax.

<details open class="outline:1|solid|fade-88 bg:white bg:gray-22@dark outline:gray-28@dark max-w:480 r:5 w:full">
    <summary class="[open]_{font:20;font:bold} cursor:pointer p:20">
        Why not inline styles?
    </summary>
    <div class="p:0|35|20 mt:-10">
        <p class="font:14 my:0">
            Inline styles cannot apply selectors, media queries, and many CSS features. With Master CSS, you can now implement them with the most succinct syntax.
        </p>
    </div>
</details>

Media queries

Responsive breakpoints

Style elements using specific breakpoints. In addition to the preset ten breakpoints @3xs~@4xl, you can also specify arbitrary ranges through comparison operators. E.g. text:center@<1234 or hide@768&<1024.

try resizing the window to see the grid columns below change

/examples/responsive-grids

<div class="grid-cols:2 grid-cols:4@xs grid-cols:5@sm grid-cols:8@md grid-cols:12@lg grid-cols:16@xl gap:10 p:50">
    <div class="grid-col-span:2@xs box">1</div>
    {[2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((item) =>
        <div class="box" key={item}>{item}</div>)
    }
</div>

Dark mode and color schemes

Use @light, @dark to style elements for different themes.

click me to toggle theme and see styles change

Mountain

A mountain is an elevated portion of the Earth's crust, generally with steep sides that show significant exposed bedrock.

<div class="bg:gray-22@dark bg:white flex flex:col@<xs max-w:480 r:10 mx:auto overflow:hidden shadow:demo">
    <img class="order:1@dark object:cover w:144@xs" src="/images/mountain.jpg" />
    <div class="p:25">
        <div class="font:fade-30@light text:20 font:bold">Mountain</div>
        <div class="font:gray-60@dark font:fade text:14 lines:3 mt:8">A mountain is an elevated portion of the Earth&#39;s crust, generally with steep sides that show significant exposed bedrock.</div>
    </div>
</div>

Print format

Use @print to style an element in print mode.

click me to see typography with `header`, `aside` hidden in print mode

<header class="hide@print">...</header>
<aside class="hide@print">...</aside>
<main>...</main>
<aside class="hide@print">...</aside>

Viewport orientation

Use @landscape / @portrait to style an element based on a specific orientation.

try shrinking the window to see image aspect ratio change

/examples/viewport-orientation

<img class="aspect:2/1@landscape aspect:1/1@portrait max-w:600 mx:auto object:cover" width="100%" alt="mountain" src="/images/mountain.jpg" />

Motion preference

Use @motion / @reduced-motion to style an element based on user specific motion preferences.

try using your dev tools to emulate prefers-reduced-motion: reduce

<svg class="@fade|ease-in|1s|infinite|alternate@motion" width="90" height="90">
    <circle class="stroke:blue-60 fill:blue-60/.2" cx="45" cy="45" r="44"></circle>
</svg>

Arbitrary media queries

In Master, we provide shorthands for most commonly used media queries, but you can also enter any media query you want.

<button class="bg:blue:hover@media(any-hover:hover)"></button>

Hello world

.font\:heavy {
    font-weight: 900
}

@media print {
    .hide\@print {
        display: none
    }
}

@media (min-width:1024px) {
    .font\:24\@md {
        font-size: 1.5rem
    }
}

automatically