Getting Started

The All-in-One CSS Solution for Building Modern and Performant Websites

Get a quick overview of Master CSS and its benefits.

🚧This page is still under construction and some content may not be complete.

What is Master CSS?

The CSS language and framework for rapidly building modern and high-performance websites.

Whether you're a solo developer or part of a large team, Master CSS can help you build interactive, dynamic, fastest, and beautiful websites.

The CSS language

Master CSS is a markup-driven CSS language with smart rules allowing you to write familiar CSS using concise syntax within HTML.

Under the hood, Master CSS automatically adds vendor prefixes, smartly ordering CSS rules, and more. This allows you to focus on building your website rather than spending a lot of effort writing and maintaining CSS rules.

Hello World

<h1 class="fg:indigo fg:red:hover font:32 font:40@sm font:heavy m:10x text:center">
Hello World
</h1>

Declaring styles through the class attribute, attaching selector states, and even base them on conditional queries. There's no need to write any inline style sheets, including creating external CSS files; just add syntax classes in your HTML.

You can write atomic classes text:center or abstract styles btn based on the characteristics of your project and team.

The CSS framework

Master CSS is a standalone CSS framework that provides various packages and solutions to expedite the development, including integrations for popular JavaScript frameworks, code linting for unifying team style, language service to enhance the developer experience, configuration API for design systems, and more.

PackageDescription
Main
@master/cssThe CSS language and framework for rapidly building modern and high-performance websites
@master/css-runtimeRun Master CSS right in the browser
@master/css-serverRender Master CSS on the server side
@master/css-extractorMaster CSS static extractor for various raw text
@master/css-validatorValidate Master CSS syntax
@master/normal.cssNormalize the browser's styles ~500B
@master/css-cliMaster CSS CLI
@master/create-cssInitialize a new Master CSS project
Integrations
@master/css.reactIntegrate Master CSS in React way
@master/css.svelteIntegrate Master CSS in Svelte way
@master/css.vueIntegrate Master CSS in Vue way
@master/css.nuxtIntegrate Master CSS Progressive Rendering in Nuxt way
@master/css-extractor.viteIntegrate Master CSS Static Extraction in Vite way
@master/css-extractor.webpackIntegrate Master CSS Static Extraction in Webpack way
Developer Tools
@master/eslint-config-cssMaster CSS ESLint Config
@master/eslint-plugin-cssMaster CSS ESLint Plugin
@master/css-language-serverMaster CSS Language Server
@master/css-language-serviceMaster CSS Language Service
master-css-vscode-language-serviceMaster CSS Language Service for Visual Studio Code
Solutions
theme-serviceLightweight CSS theme switching
class-variantCreate reusable, extensible, and customizable style class variants

Is the framework you're using not mentioned above? Check out the official installation guides.


Why Master CSS?

The reasons why to use Master CSS with an overview of features, syntax benefits, benchmarks, and a comprehensive comparison:

Rendering Modes

Master CSS provides three rendering modes, and you can choose according to project scale and application scenarios to meet your business needs.

  1. Progressive Rendering scans the rendered HTML server-side or at build time, generates the corresponding CSS rules for each page, and lazy loads the runtime engine to keep track of the dynamic class names.
  2. Runtime Rendering observes changes in DOM class names at browser runtime, generates corresponding CSS rules, and injects them into the running style sheet.
  3. Static Extraction integrates build tools to scan project source code, extract class names, generate CSS rules, and write them into a virtual CSS module.

One of the most unique, the progressive rendering works by pre-rendering the critical CSS based on the document's class names and deferring the loading of the runtime engine for any future dynamic class names.

<!DOCTYPE html>
<html lang="en">
<head>
<style id="master">.block{display:block}</style>
<script src="https://cdn.master.co/css-runtime@rc" defer></script>
</head>
<body>
<h1 class="block">Hello World</h1>
</body>
</html>

This ensures the page generates the ultra-lightweight CSS and the fastest first-page render, unlike traditionally bundling styles across the entire application.

Design System APIs

Master CSS provides a set of systematic configuration APIs to help you build a consistent, easy-to-manage, and scalable design system:

OptionDescription
AnimationsCustomizing animation keyframes for your design system.
FunctionsCustomizing functions for your design system.
Media QueriesCustomizing media queries and breakpoints for your design system.
RulesCustomizing syntax rules for your design system.
SelectorsCustomizing selectors for your design system.
SemanticsCustomizing semantic classes for your design system.
StylesCustomizing abstract styles for your design system.
VariablesCustomizing variables for your design tokens.

We have built a series of neutral tokens in the default configuration and created a universal Master Design System, which make your design system on top of or use it as a quick starting point.

VariableDescription
ColorsCustomizing color variables or starting with the crafted palette.
Base ColorsCustomizing base color variables or starting with the official design system.
Text ColorsCustomizing text color variables or starting with the official design system.
FontsCustomizing fonts for your design system.
ScreensCustomizing screens and breakpoints or starting with the official design system.
Spacing and SizingApply consistent sizes across your application.

This is just one part; more design variables and tokens are scattered throughout the syntax documentation.

For example, the semantic class capitalize is used to simplify text-transform: capitalize:

Heavy Boxes Perform Quick Waltzes And Jigs.

<p class="capitalize">Heavy Boxes Perform Quick Waltzes And Jigs.</p>

Syntax Highlighting

Master CSS is the first language to highlight class names fully, making identifying their properties, appearance, and state faster.

Do you find writing utility classes sometimes seem lengthy or hard to read?

<div class="sm:hover:bg-[#ceb195] …">

Light up your class names in markup from now on!

<div class="bg:
#ceb195
:hover@sm
"
>

This feature is included in the Master CSS Language Service.

Code Linting

Have you ever felt anxious about adding styles to class attributes? Master CSS was the first to introduce syntax validation of classes in template markup, which helps you find errors early before building and dramatically improves the developer experience.

Invalid value for `width` property.

<div class="width:"></div>

This is just a piece of cake; we also allow you to enforce consistent class ordering, legitimate class checks, class collision checks, and checks for JavaScript utilities like clsx().

To learn more, check out the Code Linting documentation.

Minimal CSS on the market

Initially, Master CSS was intended to create a CSS engine for production browser runtimes, so we concentrated on performance such as syntax parsing, rule generation, cache sharing, and even browser rendering.

Master CSS doesn't use heavy-duty build tools like PostCSS, Autoprefixer, or any minifiers, as these rules are generated with optimization.

This is a real-world benchmark of critical CSS on page load for well-known official documentation websites.

Master CSS322 kB
( 21.1 kB + Font 7.1 kB + Normal 1.7 kB )
React322 kB
React, 3.6x larger
Vue.js322 kB
Vue.js, 4.0x larger
Angular322 kB
Angular, 4.2x larger
Material UI322 kB
Material UI, 6.0x larger
Next.js322 kB
Next.js, 6.1x larger
Bootstrap322 kB
Bootstrap, 9.8x larger
Tailwind CSS322 kB
Tailwind CSS, 10.7x larger
The results are the size sum of internal CSS and external CSS, including font CSS

According to HTTP Archive CSS Bytes, the sum of transfer size kilobytes of all external stylesheets requested by the page is ~82 kB, excluding internal and inline styles.

Master CSS only injects the CSS required by the page, so the official documentation site is super tiny, about ~6 kB per page (brotli).

Comparisons

Here’s a comprehensive comparison of Master CSS, Tailwind CSS and Bootstrap:

Master CSS
Tailwind CSS
Bootstrap
Language--
Framework
Rendering
Runtime RenderingDev JIT
Server-side Rendering
CSS Hydration
Static Extraction
Preprocessors
PostCSSNoYesYes
AutoprefixerNoYesYes
CSS minifiersNoYesYes
Resource Size
Critical CSS for initial paintMinimalLargest~233 KB
Source that generates CSSPageAll files-
Generate redundant CSS rulesNoYesYes
Render-blocking CSS resourcesInternalExternalExternal
Programming
The class names from server-
The class names from static filesUnreliable-
The ability to customize tokens
Breakpoints and Screens1155
Colors~222~244~100
Variables with Modes
Media Queries
Selectors
Abstract Styles@applyPredefined
Language Service
Code-completion
Syntax highlighting for class names
CSS generate preview
Code Linting for Markup
Consistent class order
Syntax error checks
Disallow unknown classes
Class collision detection

Get ready for the journey

You can embark on an in-depth study of Master CSS without prior CSS expertise. Each document features demonstrations and fundamental usages of the intended functionalities.

The Master CSS helps you lower the threshold for learning CSS.

Use documentation

A few notes on using these documents:

  1. Get an overview of almost all the documents via the navigation on the left side of the screen, and there are only a few categories:

    • Getting Started for installation, setting up developer tools, and migration guides.
    • Syntax Tutorial for learning the core syntax.
    • Fundamentals for understanding core principles and concepts.
    • Design Variables for customizing design tokens.
    • Configuration for customizing your syntax.
    • Production Optimization for minimization and performance.
    • Syntax for all syntax references.
  2. On the right side, you'll see a table of contents that makes navigating between page sections easier.

  3. Click the search box on the left side or use the shortcut Ctrl + K or ⌘ Command + K to search the entire site.

  4. Every class name in the document can preview the generated CSS rules by hovering.

    <div class="hidden@<sm&>md">Try hovering over the class</div>

Try Master CSS online

You can use the official Master CSS Play to edit, preview, view the generated size, and even share your design online.

Master CSS Play
A real-time code editor for Master CSS

Join our community

If you have questions about Master CSS, you're always welcome to ask our community on:

We're here to support your Master CSS journey!

Star us on GitHub ↗
We'd greatly appreciate it if you could encourage and star our repository.
Getting Started
Get started with Master CSS

Master CSS allows you to install from package managers, copy and paste from CDNs, and even integrate with frameworks.

© Aoyue Design LLC.