Fundamentals

Rendering Modes

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

It's flexible — can be runtime, zero-runtime, or even hydration.

Overview

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

Runtime Rendering

Master CSS Runtime relies on the lifecycle of individual elements. Only the Master CSS class names connected to the DOM tree will generate corresponding CSS rules so browsers can calculate with minimal and precise CSS rules.

Master CSS Runtime RenderingMaster CSS Runtime Rendering
The runtime lifecycle of a Master CSS class

The runtime engine uses the standard Web APIs - Mutation Observer to observe the DOM changes in class names at runtime and generate/remove its corresponding CSS rules on the fly.

It packaged as a JavaScript module @master/css-runtime, so you can easily import and activate it in the browser.

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <script src="https://cdn.master.co/css-runtime@rc"></script> </head><body>    <h1 class="font:40 font:heavy italic m:12x text:center">Hello World</h1></body></html>

The following continuous DOM manipulation takes you to understand the behavior of the CSS runtime when the browser is running:

Insert an element with a Master CSS class name into the DOM

const h1 = document.createElement('h1')h1.className = 'text:center'

A new node <h1> is inserted into the DOM tree:

<h1 class="text:center">Hello World</h1> 

The runtime engine observes a new node with the class text:center and generates the corresponding CSS rule:

.text\:center {     text-align: center } 
h1.classList.add('font:48')

Add class name font:48 to <h1>

<h1 class="text:center font:48">Hello World</h1>

The runtime engine observes that <h1> adds the new class name font:48 and generates the corresponding CSS rules:

.font\:48 {     font-size: 3rem } .text\:center {    text-align: center}

Remove the Master CSS class name from the connected element

h1.classList.remove('text:center')

Remove class name text:center from <h1>

<h1 class="text:center font:48">Hello World</h1>

The runtime engine observes that the class name text:center is removed from <h1> and removes the corresponding CSS rule:

.font\:48 {    font-size: 3rem}.text\:center {     text-align: center } 

Removes an element with a Master CSS class from the DOM

h1.remove()

Remove the <h1> with class font:48

<h1 class="font:48">Hello World</h1> 

The runtime engine observes that the <h1> element with the class name font:48 is removed and removes the corresponding CSS rule:

.font\:48 {     font-size: 3rem } 

Due to its runtime execution nature, you can modify the class name directly in the browser by inspecting the element and seeing its changes.

Running style sheet

Where are the generated CSS rules inserted? The runtime engine appends <style id="master"> in <head> during initialization:

<head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <script src="https://cdn.master.co/css-runtime@rc"></script>    <style id="master"></style> </head>

It uses the .insertRule() and .deleteRule() of Web APIs - CSSStyleSheet to manipulate memory locally CSS rules, so any changes made to the CSS text of style#master cannot be observed by it's text content.

Still, you can detect the CSS rules in the current style sheet like this:

const sheet = document.querySelector('style[id="master"]').sheetconsole.log(sheet.cssRules)

Progressive Rendering

Master CSS Progressive Rendering works by pre-rendering critical CSS on the server and injecting them into the page HTML. On the client, the CSS runtime hydrates these rules into a virtual stylesheet, initializing a lifecycle-aware system that can respond to class name changes in real-time.

Master CSS Progressive RenderingMaster CSS Progressive Rendering
Server-side pre-rendering and client-side hydration process

This enables fast page loads, minimal CSS output, and dynamic style injection/removal with full consistency.

For example, the following HTML:

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <script src="https://cdn.master.co/css-runtime@rc"></script></head><body>    <h1 class="font:40 font:heavy">Hello World</h1></body>

Render the HTML:

import { render } from '@master/css-server'import config from './master.css'const indexHTML = readFileSync('./index.html', 'utf-8')const { html } = render(indexHTML, config)

The server renderer parses the HTML and generates the internal style sheet:

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <script src="https://cdn.master.co/css-runtime@rc"></script>    <style id="master">         .font\:40 {             font-size: 2.5rem         }     </style> </head><body>    <h1 class="font:40">Hello World</h1></body>

What benifits does this bring? The server renderer generates the critical CSS (5kB) based on the class names used in the HTML, instead of the entire application source code (500kB).

This approach allows for a minimal, deterministic CSS text that is injected into the HTML, enabling fast page loads and minimal CSS output.

CSS Hydration

We call this groundbreaking process CSS Hydration — the runtime engine parses and reconstructs the pre-rendered style sheet into its virtual memory, effectively “hydrating” it.

Master CSS HydrationMaster CSS Hydration
Master CSS Hydration — Creates virtual rules from DOM style sheet

Once hydrated, Master CSS can efficiently detect new or removed class names and update styles accordingly, without needing to reparse or regenerate previously defined rules.

The CSS runtime then takes over to detect any changes in dynamic class names.


Static Extraction

Static Extraction is a zero-runtime rendering mode in which all CSS rules are precomputed during the build process. This approach statically analyzes your source files — such as .html, .js, .jsx, .ts, .svelte, and more — to collect class names and generate a minimal, deterministic CSS bundle before the application is deployed.

Unlike runtime-based solutions, Static Extraction does not rely on any client-side JavaScript to inject or manage styles. It outputs pure CSS assets that are linked in the final HTML, allowing for maximum performance, minimal JavaScript runtime overhead, and optimal compatibility with static hosting environments.

This rendering strategy is functionally equivalent to how Tailwind CSS operates in production: styles are compiled ahead-of-time based on actual class name usage across your project, enabling aggressive tree-shaking and style deduplication.

Dynamic classes limitations

Since static extraction scans the source archive as plain text, it is impossible to predict the results of these string concatenation or interpolation.

Don't truncate class names to construct

const className = 'bg:' + (error ? 'red': 'green')

Write complete classes

const className = error ? 'bg:red' : 'bg:green'

Support dynamic values ​​using CSS variables

<div className="font-size:$(size)@sm" style={{ '--size': size }}></div>

In short, you must write out the full class in your source code and ensure it is not truncated, so it can be correctly scanned and detected.

Due to the limitations of static scanning, this is also one of the primary reasons we created the Master CSS Runtime.


Comparisons

This section provides a detailed comparison of different rendering modes. Each mode is evaluated based on various criteria such as application scenarios, performance, and generated source.

RuntimeProgressiveExtraction
Runtime Overhead
JavaScript runtimeZero
Style calculationMinimalMinimalHeavy
Memory overheadLifecycleLifecycleHeavy
Page Load Speed
Render-blocking CSSInternalInternalExternal
Render-blocking JSYesDeferNo
Pre-rendering
CSS Sources
Possible CSS bytes for a page0kB~5kB~400kB
Source of CSS bytesPagePageBundle
The source of generated CSSAttributeAttributeRaw
Capability
Class concatenation and interpolationYesYesNo
SEO metrics
Largest Contentful Paint (LCP)Fastest
First Contentful Paint (FCP)Fastest
Cumulative Layout Shift (CLS)
Interaction to Next Paint (INP)
Supported Technologies
Master CSS
Tailwind CSS
UnoCSS
SSG Static Site Generation
SSR Server-side Rendering
CSR Client-side Rendering
SPA Single-page Application
RR Runtime Rendering
SE Static Extraction
PR Progressive Rendering
SaaS Software as a Service
Syntax Tutorial
Conditional Queries

Apply styles based on theme modes, print, breakpoints, and other queries.

Fundamentals
Responsive Design

Adapt your user interface to different devices with flexible responsive syntax.

© Aoyue Design LLC.