A Virtual CSS language with enhanced syntax.

Efficiently build your UI and design system with HTML only.

<button class="btn ">

Get Started Why Master

All features included in ~14KB

styles

selector

breakpoints

colors

@media

function()

schemes

texture crew sweater

Designed for on the move

$120.0 USD

size

Get delivery dates

Style variants

186+ styles out of the box.

The styles are pre-configured and optimized, so you can build whatever you want right away.

<div class="bg:gray-22 p:10 r:10 max-w:350">
    <img class="object:cover w:full square r:5" src="/images/clothes.jpeg" loading="lazy" alt="clothes" />
    <div class="mt:10 p:15">
        <div class="font:24 font:bold capitalize">texture crew sweater</div>
        <div class="font:14 font:gray-66 mt:5">Designed for on the move</div>
        <div class="mt:12 font:semibold">$120.0 USD</div>
        <div class="mt:12 flex gap:8">
            <button class="square w:40 h:40 font:0 round b:1|solid|gray-28 p:3">
                <div class="bg:white full round">white</div>
            </button>
            <button class="square w:40 h:40 font:0 round b:1|solid|gray-28 p:3">
                <div class="bg:#999 full round">white</div>
            </button>
            <button class="square w:40 h:40 font:0 round b:1|solid|gray-28 p:3">
                <div class="bg:#333 full round">white</div>
            </button>
        </div>
        <div class="mt:20 font:12 font:semibold letter-spacing:2 font:gray-66 uppercase">size</div>
        <div class="mt:12 flex gap:8">
            <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">XS</button>
            <button class="p:10|15 r:3 font:14 font:semibold bg:gray-28">S</button>
            <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">M</button>
            <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">L</button>
            <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">XL</button>
        </div>
        <a class="font:gray-66 font:12 text:underline mt:20 inline-block" href="/">
            Get delivery dates
        </a>
    </div>
</div>

Modern effects

Advanced effects, ready to use.

Want to rapidly add filter, transform, and grid ? We've provided shorthand values like scale(2), blur(5) to make it easier for you to implement modern CSS effects.

<div class="grid-cols:3 gap:10 align-items:center {object:cover;width:full}_img">
    <div class="rotate(-8) aspect:2/3"><img src="/images/modern-effect1.jpeg" width="200" height="300" alt="modern effects 1" quality={1} /></div>
    <div class="translateY(-30) translateY(-140)@sm blur(5) aspect:2/3"><img src="/images/modern-effect2.jpeg" width="200" height="300" alt="modern effects 2" quality={1} /></div>
    <div class="transform:scale(.8)rotate(8) aspect:2/3"><img src="/images/modern-effect3.jpeg" width="200" height="300" alt="modern effects 3" quality={1} /></div>
    <div class="sepia(1) translate(-40,20) mask-image:linear-gradient(black,transparent) aspect:2/3"><img src="/images/modern-effect4.jpeg" width="200" height="300" alt="modern effects 4" quality={1} /></div>
    <div class="blend:lighten grayscale(1) grid-col:2/2|span grid-row:2/2|span mt:-50 mask-image:linear-gradient(black,transparent)"><img src="/images/modern-effect5.jpeg" width="400" height="600" alt="modern effects 5" quality={50} /></div>
</div>

aron
3:03 a.m
Front-end needs a revolution
joy
7:38 p.m
Shilin night market later 🥰 ?
miles
5 mins ago
task done 🙌🏻
benseage
3 hours ago
Easy game easy life
lola
11 seconds ago
Let me write the doc !

States and selectors

Selectors are now possible.

Never thought to use CSS selectors like :hover, :before, ::placeholder, and :where() directly in HTML?

Learn more about Selectors

<div class="bg:gray-22.active active p:8|20_li p:10|0 r:10 w:full max-w:340@sm">
    <input class="bg:gray-18:focus font:gray-40::placeholder outline:0 font:14 w:calc(100%-1.25rem) mx:10 p:12 lh:1 r:5" placeholder="Search for chats and messages" type="search" />
    <ul class="@shake|1s|infinite>li:first list-style:none mt:10">
        {users.map((user, index) =>
            <li class="bg:gray-28:hover bg:gray-32:active flex gap:12 cursor:pointer" key={index}>
                <div class="rel">
                    <img src={user.url} width="40" height="40" class="round object:cover" alt="avatar" />
                    {index < 2 && <svg class="abs right:1 bottom:1 bg:green-70 outline:2|solid|white outline:gray-22@dark round w:7 h:7" />}
                </div>
                <div>
                    <div class="flex align-items:center">
                        <div class="text:14 font:medium font:gray-88@dark capitalize">{user.name}</div>
                        <div class="font:12 font:fade-54 font:gray-44@dark ml:8">{user.time}</div>
                    </div>
                    <p class="text:13 m:0">{user.message}</p>
                </div>
            </li>
        )}
    </ul>
</div>

Optimum layout

Responsive design. Have it anywhere.

With 10 responsive breakpoints: @3xs~@4xl, our presets are suitable for almost all situations and devices. You can use not only arbitrary breakpoints such as font:32@>=1234, but also operators. For example text:center@>=768&<1024 .

Breakpoints apply to all styles, so that you can implement the most refined layout.

Learn more about Breakpoints

/examples/responsive-breakpoints

<h2>Mountain Photos</h2>
<div class="grid-cols:2 grid-cols:3@xs grid-cols:4@sm grid-cols:5@md gap:15 gap:20@sm mt:20">
    <div class="flex grid-col-span:2 grid-row-span:2">
        <img class="r:5" src={`/images/mountain1.jpeg`} width="600" height="300" alt="mountain" quality={50} priority={true} />
    </div>
    {mountains.map((mountain) =>
        <div class="flex" key={mountain}>
            <img class="r:5" src={`/images/${mountain}.jpeg`} width="300" height="150" alt="mountain" quality={50} priority={true} />
        </div>
    )}
</div>

Experience

Stay lazy for a better experience.

Less coding, less thinking, less maintaining.

Automatic Generation

No CSS rules to write, no CSS files to maintain.

Intelligent Rules

Sorting rules by behavior and breakpoints.

Unit Conversion

Presets with practical units based on properties.

<head>
    <style id="master-css"></style>
</head>
<body>
    <h1 class="">
        Watch how I speed up the production
    </h1>
    <h2 class="">
        Watch how I sort the breakpoints
    </h2>
    <a class="">
        Watch how I sort the behavior
    </a>
    <p class="">
        Watch how I convert the units
    </p>
</body>

/* Automatically generate CSS rules in <style id="master-css"> */

Why should I use Master CSS?

Syntax

Brief, but powerful.

More succinct, more intuitive, more agile.

No naming constraints

Composing UI like Lego without naming keeps the flexibility of modification.

Syntactic Sugar

Use shorthands, semantics, acronyms, symbols, groups to make your code leaner.

Faster Implementation

Directly add @breakpoint, :selector, and even !important to the suffix and it works right away.

Semantics

Writing CSS in class attributes feels weird?

Our intention isn't to let you write CSS directly, but you can still do it.

<a class="display:block font-style:italic aspect:1/1 border-radius:50% width:100% height:100% position:relative visibility:invisible isolation:isolate"></a>

Try using more sensible semantics. ↓ 63% code

<a class="block italic square round full rel invisible isolate"></a>

Check out our Syntax Tutorial

Shorthands

Class attributes get too long?

<a class="animation-name:fade animation-duration:1s animatino-timing-function:ease transition-property:opacity transition-duration:.3s margin-top:1rem margin-bottom:1rem margin-right:2rem margin-left:2.5rem"></a>

Try rewriting in shorthand. ↓ 62% code

<a class="animation:fade|1s|ease transition:opacity|.3s margin:16|32|16|40"></a>

and with recommended symbols and acronyms. ↓ 80% code

<a class="@fade|1s|ease ~opacity|.3s m:16|32|16|40"></a>

Check out our Syntax Tutorial

Enhanced

Why not just inline styles?

I want the button to be bigger at viewport width >=1024px and then fade when disabled.

<button style="font-size: .875rem; text-align: center; height: 2.5rem;" disabled>Oops...</button>

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

<button class="font:14 text:center height:40 height:56@md opacity:.5[disabled]" disabled>Yeah!</button>

Check out our Syntax Tutorial

Groups

So cool, it's a group feature!

<ul class="block>li:hover@md p:16>li:hover@md w:full>li:hover@md text:center>li:hover@md font:blue/.5>li:hover@md"></ul>

DRY (Don't Repeat Yourself) up and make your CSS more readable. ↓ 45% code

<ul class="{block;p:16;w:full;text:center;font:blue/.5}>li:hover@md"></ul>

Check out our Syntax Tutorial

Customization

Customize to your design system.

Sometimes arbitrary, sometimes unified.

import { Style } from '@master/css';
 
Style.extend('classes', {
    btn: 'px:18 h:40 font:14 font:medium r:4 inline-flex align-items:center',
    container: 'max-w:1280 px:20 px:40@sm mx:auto'
});

<!-- Using them in your HTML would look like this. -->
<button class="btn bg:blue-60 bg:blue-36:hover">
    Submit
</button> 
 
<div class="container text:center">
    <h2>Customize to your design system.</h2>
</div>

Learn more about Customization

Flexibility

Awaken CSS in HTML and JS.

Accomplish more with more flexibility.

<div class="font:teal-70 font:purple-70:hover font:96 font:heavy">Aa</div>

Dynamically assign values.

Dynamic assignment is applicable to all styles, so you can assign even after fetching data from the server.

<div className={`font:teal-${size} font:purple-${size}:hover font:96 font:heavy`}>
    Aa
</div>

<div class="scaleX(-1) ~transform|.3s font:96 font:heavy">Aa</div>

Conditionally apply class names.

To conditionally manipulate class names, you can use vanilla JS or any other framework.

<div className={(flipped ? 'scaleX(-1) ' : '') + '~transform|.3s font:96 font:heavy'}>
    Aa
</div>

Performance

Hybrid Rendering

You get runtime flexibility and faster page loads.

On-demand Injection

Scan class names of the current page, and only generate the CSS required by the current page.

AOT and JIT

Generate CSS ahead of time to improve FCP and continue to use JIT on the browser side.

Sharing CSS Rules

With a diffing algorithm, CSS rules won't be duplicated, which reduces output size.

import * as express from 'express';
import { Style, StyleSheet } from '@master/css';
import { render } from '@master/css/render';
// A simple example for express
app.get('/', function(req, res) {
    res.render('index.html', (error, html) => {
        if (err) console.log(err)
        return render(html, { StyleSheet }).html;
    })
})

<!-- User gets pre-rendered HTML on the browser side. -->
<!DOCTYPE html>
<html lang="en">
<head>
    <style id="master-css">...</style>
    <title>Master CSS - A Virtual CSS language with enhanced syntax</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.master.co/css"></script>
</head>
<body>
    <h1 class="block font:48@md p:12">Hello World</h1>
    <a class="bg:blue bg:blue-64:hover">Get Started</a>
    <p class="bg:blue bg:blue-64:hover">Sharing CSS Rules</p>
</body>
</html>

/* <style id="master-css"> */
.block {
    display: block
}
.p\:12 {
    padding: 0.75rem
}
.bg\:blue {
    background-color: #175fe9
}
.bg\:blue-64\:hover:hover {
    background-color: #6599f0
}
@media (min-width:1024px) {
    .font\:48\@md {
        font-size: 3rem
    }
}