每个UI框架最终都会做出同样的承诺：一致性、开发速度和统一的视觉效果。区别在于每个框架如何解决灵活性（工具类）与语义化（现成组件）之间的张力。Cerne 试图两者兼得。
设计令牌作为唯一真相来源
颜色、间距、字体、圆角和阴影都以CSS变量的形式存在（--cerne-color-primary、--cerne-space-4……），由Sass映射表生成。这意味着组件、工具类——甚至这份文档本身——读取的都是同一套值。从浅色主题切换到深色主题，只需替换:root中的变量集合。
如果文档和CSS可能出现分歧，那它们迟早会分歧。因此设计令牌页面实时读取计算后的值，而不是手动复制的数字。
按特异性排序的层级
我们采用了 ITCSS 的一种变体：首先是Sass的配置和工具（不生成CSS），然后依次是：
ITCSS（倒三角CSS）是一种按特异性递增组织CSS的方法论——从顶部通用、低影响范围的规则，到底部具体的组件和工具类——从而避免
!important 之争。
- 重置样式与基础元素
- 布局对象（网格、应用外壳、stack/cluster）
- 语义化组件（按钮、卡片、模态框……）
- 工具类放在最后——以确保始终能够覆盖其他样式
| 层级 | 特异性 | 示例 |
|---|---|---|
| 元素 | 低 | a、table |
| 组件 | 中 | .btn-primary |
| 工具类 | 高（有意为之） | .mt-4 |
缺失的组件：预约时间表
没有一个流行框架自带现成的时间表组件。对于房间预约系统来说，这是核心组件——因此我们用纯CSS Grid和无依赖的JavaScript构建了一个，通过测量DOM中单元格的实际高度来定位事件。
总结
运行时零依赖：没有jQuery、Popper或Chart.js——只有纯CSS和JavaScript，各自编译成单个文件。
原生的应用外壳、预约时间表和数据表组件，覆盖了Bootstrap和纯Tailwind在搭建真正后台面板时都缺失的基础组件。
深色模式、RTL支持和AA级无障碍并非独立套件——它们是每个组件从第一次提交起就有的默认行为。
文档直接从编译后的CSS读取设计令牌，因此永远不会出现过时的颜色表。
最终成果是一个同样适用于管理后台、学习环境，或者——就像这篇文章一样——博客的框架。