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.

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
Runtime Rendering

Observe for changes to class names in the DOM tree to manipulate CSS rules and sync to the runtime stylesheet.

Learn more
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 + RuntimeRuntimeZero-runtime
Applicable technologies
Generated source
HTML stringRuntime DOM Tree.html, .js, .jsx, .svelte, ...
Application scenarios
SaaS Software as a ServiceSaaS Software as a Service-
Dynamic applicationsDynamic applicationsSemi-dynamic applications
DashboardDashboardSemi-dynamic dashboard
Static siteStatic siteStatic site
First page load
Lazy loading runtime engine~17KB runtime engineNo runtime engine
Page-used CSSGenerate CSS at runtimeLoad all pages CSS
Internal CSSRender-blocking JS resourcesRender-blocking CSS resources
Fastest FCP--
Performance in the browser
Minimal, CSS generated on demandMinimal, CSS generated on demandIncluding page-unused CSS
~0.01ms/class generation cycle~0.01ms/class generation cycleNone, pre-generated CSS
Internal CSS in documentExternal JSExternal CSS
The source of class names
class attributes in markupclass attributes in markupScan all source files
100% reliability100% reliabilityIrregular 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
Syntax Tutorial
Applying Conditionally

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

Markup-driven CSS

Master CSS styles are driven by template markups and generate CSS rules on demand.

© Aoyue Design LLC.