px写死会阻断主题切换、响应式适配与语义表达，应改用CSS变量+rem+逻辑属性：定义--size-xs等语义化尺寸变量，组件类名绑定语义而非数值，用max-inline-size替代width，确保JS可读取变量实现动态交互。
直接用 width 和 height 写死像素值，根本撑不起设计系统——它既没法换主题、也不响应屏幕、更难统一维护。真正可行的路径是：用语义化类名 + CSS 自定义属性 + 逻辑尺寸属性，再加一层 JS 可读能力。
为什么 px 值在设计系统里必然失效
写 width: 200px 看似简单，但一换深色模式就得全局搜改；一加竖排文本（writing-mode: vertical-rl）就错位；一上高 DPR 屏幕，按钮边框就糊成一片。更麻烦的是，设计师给的「小号按钮」和「中号卡片」不是绝对数值，而是相对层级关系——这个语义，px 表达不了。
- 所有固定像素值都会阻断主题切换（比如字号缩放、色彩替换）
-
em在嵌套结构里会层层放大，rem才是唯一可控锚点 -
max-inline-size比width更贴近真实布局意图（尤其对行内级组件） - 没暴露 CSS 变量给 JS，就无法做尺寸感知型交互（如下拉菜单宽度跟随触发器）
用 :root 变量 + rem 构建可配置尺寸层级
把「小/中/大」映射为根元素上的 CSS 变量，再用 rem 统一驱动：
html {
--size-xs: 0.75rem; /* 12px */
--size-sm: 0.875rem; /* 14px */
--size-md: 1rem; /* 16px */
--size-lg: 1.125rem; /* 18px */
--size-xl: 1.25rem; /* 20px */
}组件类名只绑定语义，不写具体值：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
.btn--sm { padding: var(--size-xs) calc(var(--size-xs) * 1.5); }
.btn--md { padding: var(--size-sm) calc(var(--size-sm) * 1.5); }
.btn--lg { padding: var(--size-md) calc(var(--size-md) * 1.5); }- 改整套尺寸？只动
:root里的变量，不用碰任何组件样式 - 响应式缩放？加媒体查询：
@media (max-width: 768px) { html { font-size: 14px; } } - 禁用
em——它继承父级font-size，嵌套三层后1em可能变成2.25rem -
calc(var(--size-md) * 1.5)这种写法比硬编码24px更易推演和审计
用 inline-size / max-inline-size 替代 width 控制真实占用
按钮、输入框这类行内级组件，width: 100% 容易撑破容器；卡片类块级组件，width: 100% 在 4K 屏上会拉得过宽。真正该控的是「最大可用宽度」和「内联方向尺寸」：
-
max-inline-size: 100%替代width: 100%，兼容竖排文本场景 -
max-width: 480px比width: 100%更安全，防止超宽屏失控 -
inline-size和block-size是逻辑属性，比width/height更健壮（Safari 15.4+ 支持完整） - 别用
!important锁死尺寸——它会让下游主题覆盖完全失效
让 JS 能读取 CSS 变量做动态判断
下拉菜单要根据按钮尺寸调整弹层宽度，日期选择器需按当前 --size-md 计算行高——这些都要求变量可被 JS 读取：
const root = document.documentElement;
const mdSize = parseFloat(getComputedStyle(root).getPropertyValue('--size-md'));- 读取结果是数值（
16），不是字符串（"1rem"），可直接参与计算 - 避免在
attributeChangedCallback里反复调用getComputedStyle，缓存或节流处理 - 如果组件需要响应字体缩放（如系统辅助功能），优先用
rem基础值，而非px或em - 所有间距、圆角、阴影必须基于变量，禁用
px——否则设计令牌就形同虚设
最难的不是写对一行 var(--size-md)，而是让每个组件 HTML 结构自闭合、类名带命名空间、CSS 不泄漏、JS 能感知尺寸变化——四者缺一不可。一旦漏掉某环，设计系统就从工具变成枷锁。
