Fundamentals

Rendering Modes of Master CSS

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

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

Recommended Progressive Rendering Render the CSS rules required for the page on the server side or at build time, and lazily load the runtime engine. Learn more	Easiest Runtime Rendering Observe for changes to class names in the DOM tree to manipulate CSS rules and sync to the runtime stylesheet. Learn more	Zero Runtime Static Extraction Extract class names from various files at build time, generate a virtual CSS module or file, and import it into the entry file. Learn more
Pre-rendering + Runtime	Runtime	Zero-runtime
Applicable technologies
SSG, SSR	CSR, SPA	-
Generated source
HTML string	Runtime DOM Tree	`.html`, `.js`, `.jsx`, `.svelte`, ...
Application scenarios
SaaS Software as a Service	SaaS Software as a Service	-
Dynamic applications	Dynamic applications	Semi-dynamic applications
Dashboard	Dashboard	Semi-dynamic dashboard
Static site	Static site	Static site
First page load
Lazy loading runtime engine	~17KB runtime engine	No runtime engine
Page-used CSS	Generate CSS at runtime	Load all pages CSS
Internal CSS	Render-blocking JS resources	Render-blocking CSS resources
Fastest FCP	-	-
Performance in the browser
Minimal, CSS generated on demand	Minimal, CSS generated on demand	Including page-unused CSS
~0.01ms/class generation cycle	~0.01ms/class generation cycle	None, pre-generated CSS
Internal CSS in document	External JS	External CSS
The source of class names
Dynamic	Dynamic	Semi-dynamic
`class` attributes in markup	`class` attributes in markup	Scan all source files
100% reliability	100% reliability	Irregular sources

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