Library Master-CSS 用类HTML语法编排样式的CSS引擎

传统 CSS 需要单独的样式文件、起名、维护选择器层级；CSS-in-JS 又引入运行时开销与组件耦合。想要“在标记里直接写样式、又能在构建期编译、还支持状态与响应式”的体验，选项并不多。
Master CSS 的思路是：用一套近似 HTML 属性的简洁语法（如 class='text:center font:bold'）直接在标记里编排样式，构建期编译成极小的 CSS，无需运行时，也不绑定具体框架。

项目基本信息

一、项目介绍

master-co/css（@master/css）是一个标记驱动的 CSS 编排语言/引擎，MIT 协议。你在 HTML 的 class 里用紧凑语法描述样式，引擎在构建阶段扫描并生成对应 CSS——没有运行时，也不强制任何 UI 框架。它支持状态（hover/focus）、响应式、主题 token、嵌套选择器等，定位是“比原子类更表达力、比传统 CSS 更就近”的样式方案。

二、核心优势

1. 标记驱动：样式写在 class 语法里，就近可读、好维护。
2. 零运行时：构建期编译成纯 CSS，没有客户端 JS 开销。
3. 表达力强：支持状态、响应式、主题与选择器嵌套。
4. 框架无关：原生 HTML 或任意框架均可接入。
5. 体积友好：按需生成，产物体积小。

三、适用场景

• 想要原子化/就近写样式、又嫌 Tailwind 表达力受限。
• 做设计系统，需要 token 与主题统一管理。
• 对运行时体积敏感、希望纯 CSS 输出。
• 混合技术栈、需要一个框架无关的方案。

四、安装教程

安装核心包，并加上对应框架的运行时（以 React 为例）：

npm install @master/css @master/css.react

其它框架有 @master/css.vue 等对应集成包。常见报错：只装了 @master/css 未装框架运行时会导致标记不生效；构建插件未接入会在打包阶段漏掉样式扫描。

五、使用示例

在标记里直接写样式语法：

<div class='text:center font:bold color:blue-600 bg:white p:4'>Hello</div>

真实效果：构建时引擎把这段文本编译成规则，渲染即应用；状态与响应式可写成 hover:color:red、sm:p:6 这类后缀，无需另写 CSS 文件。

六、常见问题

Q：和 Tailwind 谁更合适？
A：若你追求极简原子类，Tailwind 更主流；若想要更强表达力与类 HTML 语法，Master CSS 更灵活。
Q：有运行时吗？
A：没有，样式在构建期编译为纯 CSS。
Q：支持哪些框架？
A：提供 React、Vue 等运行时包，也可用于原生 HTML 项目。

七、总结

Master CSS 用标记驱动的语法把样式就近写进 class，构建期编译成纯 CSS，兼顾表达力与零运行时。对想摆脱 CSS 文件与媒体查询、又不想被某框架绑定的前端，它是 Tailwind 之外一个有特色的选项；MIT 协议、框架无关。