Introduction to Master CSS
The CSS language and framework for rapidly building modern and high-performance websites.
What is Master CSS?
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/JSX.
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 applying conditionally. 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.
View all official packages
| Package | Description |
|---|---|
| Main | |
| @master/css | The CSS language and framework for rapidly building modern and high-performance websites |
| @master/css-runtime | Run Master CSS right in the browser |
| @master/css-server | Render Master CSS on the server side |
| @master/css-extractor | Master CSS static extractor for various raw text |
| @master/css-validator | Validate Master CSS syntax |
| @master/css-cli | Master CSS CLI |
| @master/create-css | Initialize a new Master CSS project |
| Integrations | |
| @master/css.react | Integrate Master CSS in React way |
| @master/css.svelte | Integrate Master CSS in Svelte way |
| @master/css.vue | Integrate Master CSS in Vue way |
| @master/css.nuxt | Integrate Master CSS Progressive Rendering in Nuxt way |
| @master/css-extractor.vite | Integrate Master CSS Static Extraction in Vite way |
| @master/css-extractor.webpack | Integrate Master CSS Static Extraction in Webpack way |
| Developer Tools | |
| @master/eslint-config-css | Master CSS ESLint Configuration |
| @master/eslint-plugin-css | Master CSS ESLint Plugin |
| @master/css-language | Master CSS TextMate Grammars |
| @master/css-language-server | Master CSS Language Server |
| @master/css-language-service | Master CSS Language Service |
| master-css-vscode | Master CSS for Visual Studio Code |
| Other Solutions | |
| @master/colors | A crafted color system for beautiful user interfaces |
| @master/normal.css | Normalize browser's styles ~600B |
| theme-mode | A lightweight utility for switching CSS theme modes |
| class-variant | Create reusable and extensible style class variants |
Why Master CSS?
The reasons why to use Master CSS with an overview of features, syntax benefits, benchmarks, and a comprehensive comparison:
Minimal CSS Output
This is a real-world benchmark of critical CSS on page load for well-known official documentation websites.
322 kB
322 kB
322 kB
322 kB
322 kB
322 kB
322 kB
322 kB37 kB37 kB37 kB37 kB37 kB37 kB37 kB37 kBAccording 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).
Master CSS provides three rendering modes, and you can choose according to project scale and application scenarios to meet your business needs.
One of the most unique, the progressive rendering works by pre-rendering the critical CSS based on the element's class names and deferring the loading of the runtime engine for any future dynamic class names.
<!DOCTYPE html><html lang="en"><head> … <!-- Generate only the critical CSS required for the page. --> <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.
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.
Custom Design Systems
Master CSS provides rich configuration to help you build a consistent, easy-to-manage, and scalable design system. We've built a series of neutral design tokens and created a universal Master Design System, which makes your design system on top of or use it as a quick starting point.
| Variable | Description |
|---|---|
| Colors | Customizing color variables or starting with the crafted palette. |
| Primitive Colors | Customizing primitive color variables or starting with the official design system. |
| Frame Colors | Customizing frame color variables or starting with the official design system. |
| Text Colors | Customizing text color variables or starting with the official design system. |
| Fonts | Customizing fonts for your design system. |
| Screens | Customizing screen sizes and breakpoints for your design system. |
| Spacing and Sizing | Apply consistent sizes across your application. |
This is just one part; more design variables and tokens are scattered throughout the syntax documentation.
Innovative 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.
Reliable 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 `font` property.
<div class="font:">…</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.
Comparisons
Here’s a comprehensive comparison of Master CSS, Tailwind CSS and Bootstrap:
| | | |
|---|---|---|---|
| Master CSS | Tailwind CSS | Bootstrap | |
| Language | - | - | |
| Framework | |||
| Rendering | |||
| Runtime Rendering | Dev JIT | ||
| Server-side Rendering | |||
| CSS Hydration | |||
| Static Extraction | |||
| Preprocessors | |||
| PostCSS | No | Yes | Yes |
| Autoprefixer | No | Yes | Yes |
| CSS minifiers | No | Yes | Yes |
| Resource Size | |||
| Critical CSS for initial paint | Minimal | Largest | ~233 KB |
| Source that generates CSS | Page | All files | - |
| Generate redundant CSS rules | No | Yes | Yes |
| Render-blocking CSS resources | Internal | External | External |
| Programming | |||
| The class names from server | - | ||
| The class names from static files | Unreliable | - | |
| The ability to customize tokens | |||
| Breakpoints and Screens | 11 | 5 | 5 |
| Colors | ~222 | ~244 | ~100 |
| Variables with Modes | |||
| Selectors | |||
| Components | @apply | Predefined | |
| 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 | |||