Rendering Modes
Understand how the rendering modes of Master CSS work and enhance your website's performance.
It can be runtime, zero-runtime, or even hydration.
Overview
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.
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="italic m:12x fg:strong font:40 font:heavy">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 } Added Master CSS class names to elements in links
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 } All CSS rules related to Master CSS have been removed
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.
This enables fast page loads, minimal CSS output, and dynamic style injection/removal with full consistency.
Pre-rendering — SSG, SSR
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
Master CSS Hydration is the process that restores the server-side (or build time) rendered CSS on the client. This includes things like reusing the pre-rendered CSS structures, persisting the application CSS state, reconstructing the style sheet into its virtual memory.
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.
Available Modes
In addition to the three main rendering modes mentioned above, Master CSS also uses integrations like Vite to further break down the rendering modes, allowing you to start the project with zero configuration.
| Mode | Description |
|---|---|
'runtime' | Detects the application's entry file, automatically injects the initialization of CSSRuntime, and imports the config code. |
'extract' | Detects the application's entry file, automatically imports the virtual:master.css module, and triggers the static extraction workflow. |
'pre-render' | Renders all *.html dependencies and injects CSS internally. This mode may be integrated with other SSR capabilities. |
'progressive' | Combines runtime and pre-render modes. |
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.
| Modes | Progressive | Runtime | Extract | Pre-render |
|---|---|---|---|---|
| Technologies | ||||
| CSR (Client-side Rendering) | - | - | ||
| SSR (Server-side Rendering) | - | - | ||
| SSG (Static Site Generation) | - | - | ||
| Frameworks | ||||
| Master CSS | ~27kB | |||
| Tailwind CSS | Dev | - | ||
| Uno CSS | ~53kB | |||
| Runtime Overhead | ||||
| JavaScript runtime | Zero | Zero | ||
| Style calculation | Minimal | Minimal | Heavy | Minimal |
| Memory overhead | Lifecycle | Lifecycle | Heavy | Minimal |
| Page Load Speed | ||||
| Render-blocking CSS | Internal | Internal | External | Internal |
| Render-blocking JS | Defer | Yes | No | No |
| Pre-rendering | ||||
| CSS Sources | ||||
| Possible CSS bytes for a page | ~5kB | 0kB | ~400kB | ~5kB |
| Source of CSS bytes | Page | Page | Bundle | Page |
| The source of generated CSS | Attribute | Attribute | Raw | Attribute |
| Capability | ||||
| Class concatenation | Yes | Yes | No | Initial |
| Class interpolation | Yes | Yes | No | Initial |
| Classes in .html | Yes | Yes | Yes | Yes |
| Classes in .js, .jsx, .vue, ... | Yes | Yes | Partial | No |
| SEO metrics | ||||
| LCP (Largest Contentful Paint) | Fastest | Fastest | ||
| FCP (First Contentful Paint) | Fastest | Fastest | ||
| CLS (Cumulative Layout Shift) | ||||
| INP (Interaction to Next Paint) | ||||