现代原生 CSS 已能承担大部分设计系统工作。自定义属性、Grid、Flexbox、层叠层和容器查询让组件可以直接使用浏览器理解的语言。是否取消预处理器，不该按信仰判断，应看团队的浏览器范围、构建目标与维护成本。
先把令牌变成浏览器变量
颜色、间距、字号、圆角和层级应定义为语义化自定义属性，例如按钮前景色与危险操作色。组件只引用语义令牌，主题或品牌变化时在较高层覆盖变量。这样设计文件导出的值不会散落在每个选择器里。
令牌命名要描述用途，不要描述当前颜色。名称写成蓝色会让后续换主题变成误导。
布局为何不必依赖旧工具链
Grid 适合二维区域，Flexbox 适合一维排列。两者配合 `minmax`、`clamp` 和逻辑属性，已经能处理多数响应式页面。组件应在自身容器宽度变化时调整，而不是只盯视口尺寸，这会让同一组件放入侧栏和主内容区时更可靠。
构建步骤仍有什么价值
原生 CSS 不等于零构建。压缩、自动加前缀、内联小文件和提取关键样式仍能改善传输性能。关键区别在于源码能否直接被浏览器解释，还是必须经过一种自定义语法转换。
若仍使用构建工具，配置应保持单一职责。为了处理一个导入问题引入完整编译链，往往比问题本身更难维护。
组件如何防止样式互相污染
使用层叠层安排 reset、基础令牌、组件和覆盖层的优先顺序。选择器保持短小，避免用层层嵌套压制冲突。组件变体通过属性或明确类名表达，别依赖页面结构中的偶然位置。
怎样验证设计系统
- 为每个组件建立正常、禁用、错误和窄容器示例。
- 在目标浏览器和缩放比例下做视觉回归。
- 检查键盘焦点、对比度和文本放大后的可用性。
- 把令牌修改接入页面样本，确认影响范围符合预期。
视觉一致性不是唯一指标。内容团队能否安全组合组件、工程师能否定位覆盖来源，同样决定系统能否持续使用。
常见问题
原生 CSS 会让文件失控吗
不会自动失控。缺少令牌、层次和组件边界才会失控，预处理器也无法代替这些规则。
是否应删除全部构建工具
先评估实际用途。保留有明确收益的步骤，逐项移除只是历史遗留的转换。