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

Renders HTML statically or server-side for class names, generates CSS rules, and loads the runtime engine asynchronously.

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
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
SSG, SSRCSR, SPA-
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
DynamicDynamicSemi-dynamic
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
Conditional Queries

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

Fundamentals
Markup-driven CSS

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

© Aoyue Design LLC.