Master CSS

可直接在标记中编写增强语法样式的 CSS 引擎

原子化CSS标记驱动Runtime CSS工具类

Master CSS 用运行时引擎实时把类名语法转换为样式，适合想减少构建门槛并把样式表达尽量贴近 HTML 的项目。

Master CSS

标记驱动的 CSS 语言和引擎，通过增强语法在 HTML 中直接编写样式，无需构建工具。

技术简介说明

Master CSS 是由 Master.co 团队开发的一种标记驱动（markup-driven）的 CSS 语言和引擎。它的核心创新是"Virtual CSS"的概念——通过浏览器端的 Virtual CSS Engine（基于 MutationObserver）实时观察 DOM 树的变化，将 HTML 中的增强语法类名即时转换为 CSS 样式。这意味着开发者可以直接在 HTML 元素上编写样式，而无需单独的 CSS 文件或复杂的构建工具链。

Master CSS 的定位是"一种增强的 CSS 语法语言"，它扩展了标准 CSS 语法，允许在类名中使用更简洁、更直观的表达式。例如 font:24 表示 font-size: 24px，flex~items-center 表示 display: flex; align-items: center。这种标记驱动的方式消除了 HTML 和 CSS 之间的上下文切换，让样式定义更贴近结构。

Master CSS 的体积非常小（约 14KB），内置 186+ 样式规则，支持响应式设计、高级选择器和设计令牌配置。它可以在浏览器中直接运行（CDN 模式），也可以集成到 Vite 等构建工具中使用。v2.0 引入了四种渲染模式（Runtime、Static、Server/SSR、Progressive），并持续通过 RC 版本迭代开发中（截至 2025 年中为 v2.0.0-rc.69）。

基本信息

官网：https://css.master.co
GitHub：https://github.com/master-co/css
License：MIT
最新版本：v1.37.8（npm 稳定版），v2.0.0-rc.69（Release Candidate，2025 年 6 月）
主要维护者/公司：Master.co（@master-co 组织）
GitHub Stars：约 1.9k
包体积：~14KB
内置样式：186+ 规则
v2.0 状态：v2.0.0-rc.69（Release Candidate，持续迭代中）

快速上手

安装

CDN 模式（最简单，无需构建工具）

<!DOCTYPE html>
<html>
<head>
  <!-- 直接引入 Master CSS 运行时 -->
  <script src="https://cdn.jsdelivr.net/npm/@master/css@latest/dist/master-css.min.js"></script>
</head>
<body>
  <h1 class="font:32 bold text:center m:40">Hello Master CSS</h1>
  <p class="color:gray.50 m:t:16">无需构建工具的原子化 CSS</p>
</body>
</html>

npm 安装

npm install @master/css

Vite 集成

npm install @master/css @master/css.vite

// vite.config.ts
import masterCSSVite from '@master/css.vite'
 
export default {
  plugins: [
    masterCSSVite(),
  ],
}

// main.ts
import '@master/css'

基础配置

// master.css.ts 或 master.css.js
import type { Config } from '@master/css'
 
export default {
  // 设计令牌
  tokens: {
    colors: {
      brand: {
        primary: '#3b82f6',
        secondary: '#10b981',
      },
    },
    fonts: {
      display: '"Inter", sans-serif',
    },
    spacings: {
      xs: '0.25rem',
      sm: '0.5rem',
      md: '1rem',
      lg: '2rem',
    },
  },
  // 媒体查询断点
  media: {
    mobile: '(max-width: 767px)',
    tablet: '(min-width: 768px) and (max-width: 1023px)',
    desktop: '(min-width: 1024px)',
  },
  // 自定义规则
  rules: {
    // 自定义工具类
    'btn': 'display:inline-flex items:center justify:center px:16 py:8 rounded:8 font:bold cursor:pointer',
  },
  // 重置样式
  reset: true,
}

最小示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/@master/css@latest/dist/master-css.min.js"></script>
  <title>Master CSS 示例</title>
</head>
<body class="bg:gray.50 p:32 font:sans">
 
  <!-- 卡片组件 -->
  <div class="max-w:400 mx:auto bg:white rounded:12 shadow:p:24">
    <h1 class="font:28 bold color:gray.900 mb:16">Hello Master CSS</h1>
    <p class="font:16 color:gray.500 mb:24">
      标记驱动的 CSS 语言，直接在 HTML 中编写样式。
    </p>
    <button class="btn bg:blue.500 color:white px:20 py:10 rounded:8 font:medium hover:bg:blue.600">
      点击我
    </button>
  </div>
 
  <!-- 响应式布局 -->
  <div class="flex flex:wrap gap:16 p:16">
    <div class="flex:1 min-w:200 bg:gray.100 rounded:8 p:24">列 1</div>
    <div class="flex:1 min-w:200 bg:gray.100 rounded:8 p:24">列 2</div>
    <div class="flex:1 min-w:200 bg:gray.100 rounded:8 p:24">列 3</div>
  </div>
 
</body>
</html>

核心概念与架构

Virtual CSS Engine

Master CSS 的核心是 Virtual CSS Engine：

┌─────────────────────────────────┐
│          HTML DOM Tree           │
├─────────────────────────────────┤
│     MutationObserver             │
│  (观察 DOM 变化)                  │
├─────────────────────────────────┤
│     Class Scanner                │
│  (扫描 class 属性)                │
├─────────────────────────────────┤
│     Syntax Parser                │
│  (解析增强语法)                    │
├─────────────────────────────────┤
│     Rule Matcher                 │
│  (匹配内置/自定义规则)              │
├─────────────────────────────────┤
│     CSS Generator                │
│  (生成 CSS 并注入 <style>)        │
└─────────────────────────────────┘

MutationObserver 监听：实时监听 DOM 树变化
类名扫描：提取所有 class 属性值
语法解析：解析 property:value 格式的增强语法
规则匹配：匹配内置规则或自定义规则
CSS 生成：动态生成 CSS 并注入到 <style> 标签

增强语法

Master CSS 的语法是对标准 CSS 的增强：

Master CSS 语法	等价 CSS	说明
`font:24`	`font-size: 24px`	字号简写
`color:red.500`	`color: var(--red-500)`	颜色令牌
`m:t:16`	`margin-top: 16px`	方向简写
`flex~items:center`	`display:flex; align-items:center`	组合语法
`hover:bg:blue.600`	`:hover { background: var(--blue-600) }`	状态变体
`media:desktop/font:32`	`@media (desktop) { font-size: 32px }`	响应式
`bg:red.500@50`	`background: rgba(red, 0.5)`	透明度

语法设计原则

冒号分隔：property:value 格式
点号层级：color:gray.500 表示颜色层级
波浪号组合：flex~items:center 组合多个属性
斜杠命名空间：media:mobile/font:24 条件规则
at 透明度：bg:red@50 表示 50% 透明度

核心特性

Virtual CSS Engine：基于 MutationObserver 的运行时 CSS 生成
增强语法：在 HTML class 中使用比标准 CSS 更简洁的语法
零构建工具：CDN 模式完全不需要构建工具
标记驱动：样式直接在 HTML 中定义，消除上下文切换
设计令牌：通过配置定义颜色、间距、字体等设计系统
内置 186+ 样式：开箱即用的丰富工具类
响应式设计：通过 media: 前缀支持响应式
状态变体：hover:、focus:、active: 等
自定义规则：在配置中定义自定义组合规则
Vite 插件：官方 Vite 集成支持构建时生成

生态图

官方包

包名	说明
`@master/css`	核心运行时
`@master/css.vite`	Vite 插件
`@master/css.react`	React 支持
`@master/css.vue`	Vue 支持
`@master/css.next`	Next.js 支持
`@master/css.nuxt`	Nuxt 支持
`@master/css.svelte`	Svelte 支持
`@master/css.vscode`	VS Code 扩展
`@master/emoji`	Emoji 支持
`@master/normal.css`	CSS 重置

社区生态

项目	说明
Genius UI	基于 Master CSS 的 UI 组件库（实验性）
awesome-master-css	社区资源列表

关键依赖

核心零依赖：运行时包无外部依赖
可选依赖：各框架集成包依赖对应框架

适用场景

快速原型开发（CDN 模式无需构建工具，即开即用）
HTML 优先的开发方式（适合在 HTML 模板中直接编写样式）
服务端渲染（SSR 项目，Virtual CSS Engine 可服务端生成）
学习 CSS 增强语法（理解标记驱动 CSS 的设计理念）
小型项目和演示（单文件 HTML 项目）
CMS 和模板系统（在模板中直接定义样式）
渐进式增强项目（CDN 引入，无需改变现有构建流程）

开发与工程化

开发流程

CDN 模式

# 无需安装，直接开发
# 在 HTML 中引入 CDN 即可
# 修改 HTML 后刷新页面即可看到效果

Vite 集成模式

# 安装依赖
npm install @master/css @master/css.vite
 
# 开发模式
npx vite
 
# 生产构建
npx vite build

配置与定制

// master.css.ts
export default {
  tokens: {
    colors: {
      brand: {
        50: '#eff6ff',
        100: '#dbeafe',
        500: '#3b82f6',
        600: '#2563eb',
        900: '#1e3a8a',
      },
    },
  },
  rules: {
    // 语义化规则
    'card': 'bg:white rounded:12 shadow:p:24 border:1|gray.200',
    'btn-primary': 'btn bg:brand.500 color:white hover:bg:brand.600',
    'text-gradient': 'bg:gradient|brand.500|brand.900 bg-clip:text color:transparent',
  },
}

CI/CD 集成

- name: Build
  run: |
    npm ci
    npx vite build  # 使用 Vite 构建

性能与安全

性能特点

运行时开销：Virtual CSS Engine 在浏览器中运行，有一定性能开销
初始解析：首次加载需要扫描 DOM 并生成 CSS
增量更新：DOM 变化时增量处理，开销较小
构建时模式：Vite 插件可在构建时生成 CSS，消除运行时开销
包体积：运行时约 14KB

性能对比

模式	性能特点
CDN 运行时	有运行时开销，适合开发和原型
Vite 构建时	无运行时开销，推荐生产使用

优化建议

生产环境使用 Vite 插件构建时生成 CSS
合理使用自定义规则减少重复类组合
避免在 DOM 频繁变化的元素上使用复杂样式
使用 CSS 重置（@master/normal.css）确保跨浏览器一致性

安全注意事项

CDN 运行时模式需要设置适当的 CSP（Content Security Policy）
动态生成的 <style> 标签可能受 CSP 限制
自定义规则中避免使用不受信任的输入
使用 SRI 校验 CDN 资源

技术对比

对比项	Master CSS	Tailwind CSS v4	UnoCSS	Tachyons
最新版本	v1.37.8	v4.3.2	v66.7.4	v4.12.0
核心机制	运行时 DOM 观察	构建时 Oxide 引擎	构建时正则引擎	静态 CSS
语法风格	增强语法 `font:24`	描述性 `text-2xl`	多种兼容	极简缩写 `f4`
构建工具	不需要（CDN）	需要	需要	不需要
运行时	~14KB	无	~6KB	无
包体积	~14KB	较大	~6KB	~10KB
构建时模式	✅（Vite 插件）	✅	✅	✅
可定制性	高	极高	极高	低
社区规模	小（~1.9k ★）	最大（95.8k ★）	中等（18.9k ★）	小（11.7k ★）
维护状态	🔄 低频活跃	✅ 活跃	✅ 活跃	⏸️ 停止

最佳实践

生产环境建议

使用 Vite 插件：生产环境使用构建时模式消除运行时开销
设计令牌集中管理：通过配置统一定义颜色、间距等
自定义规则复用：将常用组合提取为自定义规则
VSCode 扩展：安装 @master/css.vscode 获得智能补全

常见陷阱

运行时性能：CDN 模式在低端设备上可能有性能影响
SSR 注意事项：服务端渲染需要确保 Virtual CSS Engine 正确初始化
CSP 限制：动态生成的 <style> 可能被 CSP 阻止
社区小：遇到问题时社区资源有限
语法学习曲线：增强语法需要时间适应

技术局限与边界

已知限制

社区较小：相比 Tailwind/UnoCSS，社区资源和第三方生态较少
版本更新慢：最后正式发布版本在 2022 年底（2025 年有零散活动）
运行时开销：CDN 模式有运行时性能开销
语法独特：增强语法与标准 CSS 差异较大，学习曲线存在
框架支持有限：主要支持 Vite，对 Webpack 等支持不如 Tailwind/UnoCSS 成熟
文档覆盖度：相比 Tailwind 的详细文档，Master CSS 文档相对简洁

不适用场景

大型团队协作：社区太小，新成员可能需要较长学习周期
需要丰富组件库：没有活跃的第三方组件生态系统
高性能要求的运行时场景：Virtual CSS Engine 的 MutationObserver 有性能开销
Webpack 项目：Webpack 集成不如 Vite 成熟

迁移注意事项

Master CSS 语法独特，迁移到 Tailwind/UnoCSS 需要重新映射类名
从 Tailwind 迁移：概念相似但语法不同，需要逐个转换
建议先在小型项目或原型中试用，评估适用性

学习资源

官方文档：https://css.master.co/docs
v2.0 RC 文档：https://rc.css.master.co（含迁移指南、渲染模式、条件查询等）
语法介绍：https://css.master.co/docs/why-master-css
GitHub 仓库：https://github.com/master-co/css
awesome-master-css：https://github.com/master-co/awesome-master-css
官方博客：https://rc.css.master.co/blog（含 Vite、Next.js 集成文章）
iT 邦帮忙介绍：https://ithelp.ithome.com.tw/m/articles/10319085
VSCode 扩展：搜索 "Master CSS" in Open VSX Registry
GitHub Discussions：https://github.com/master-co/css/discussions

2026 年现状

v2.0 新特性预览

四种渲染模式：Runtime（浏览器运行时）、Static（构建时静态生成）、Server/SSR（服务端生成）、Progressive（渐进式，先发首屏 CSS 再由运行时接管动态部分）
多框架集成：Vite、Next.js（含 Turbopack 支持）、React、Vue、Nuxt、Svelte 等
新语法特性：Group Selectors、baseUnit + 倍数单位系统（Master Spacing System）
Runtime 分离：运行时从 @master/css 主包中独立，便于按需引入
ESLint 集成：首个在模板标记中自带类型安全与语法检查的 CSS 框架

发展趋势

v1 停滞，v2 RC 活跃：稳定版已 3 年未更新，但 v2 RC 线在 2025 年持续高频迭代
Vite 生态：@master/css.vite v2.0-rc.65 已支持所有渲染模式
Next.js 适配：官方博客 2025 年 4 月宣布 Master CSS Next.js 适配器

社区活跃度

GitHub Star ~1.9k
npm 周下载量约 4,000 次
GitHub Discussion 和 Facebook 页面有少量社区互动
无大型 Discord/论坛社区

未来展望

Master CSS v2.0 的多渲染模式设计是其最具差异化的竞争力，特别是 Progressive 渲染模式在 SSR/SSG 场景中很有潜力。但 v2.0 自 2023 年进入 Beta/RC 至今仍未发布稳定版，项目进展偏慢。要在生态规模上追赶 Tailwind CSS 和 UnoCSS 仍面临很大挑战。建议关注 v2.0 正式版的发布时间表。

Master CSS

Master CSS

技术简介说明

基本信息

快速上手

安装

基础配置

最小示例

核心概念与架构

Virtual CSS Engine

增强语法

语法设计原则

核心特性

生态图

官方包

社区生态

关键依赖

适用场景

开发与工程化

开发流程

配置与定制

CI/CD 集成

性能与安全

性能特点

性能对比

优化建议

安全注意事项

技术对比

最佳实践

生产环境建议

常见陷阱

推荐模式

技术局限与边界

已知限制

不适用场景

迁移注意事项

学习资源

2026 年现状

最新版本

v2.0 新特性预览

发展趋势

社区活跃度

未来展望