选用bem修饰符而非css变量控制阴影边框更稳定，因其静态类名避免多主题嵌套、伪类继承和ssr下的更新遗漏与级联覆盖；所有修饰符必须带完整块前缀（如.card--shadow-heavy），禁用孤立类，主题样式统一收口至单文件按组件组织，修饰符组合需语义清晰、顺序可读。
为什么不用CSS变量而选BEM修饰符控制阴影和边框
直接写 .card--dark 比用 --shadow-color 变量更稳，因为阴影/边框这类视觉属性在多主题嵌套、伪类继承（如 :hover）、SSR 渲染时极易漏更新或被级联覆盖。BEM 修饰符是静态类名，编译即确定，浏览器渲染零歧义；而变量依赖运行时状态和作用域链，.card:hover 下的 box-shadow 可能沿用旧主题值。
阴影和边框修饰符必须绑定块名，禁用孤立类
常见错误现象：.--shadow-heavy 或 .shadow-dark 这类无主块的类名，会导致样式污染、DevTools 无法识别归属、构建工具无法校验。
- 正确写法：
.card--shadow-heavy、.button--border-thin、.input--border-error - 所有修饰符必须带完整块前缀，确保选择器权重可控、语义可追溯
- 用 PostCSS 插件校验：禁止出现未匹配
^[a-z]+__|[a-z]+--前缀的双连字符类名
多主题下阴影/边框的冲突怎么防
核心不是“怎么写”，而是“在哪写”——所有主题相关样式必须收口到同一份 CSS 文件中，按组件维度组织，而非拆成 theme-light.css 和 theme-dark.css。
- 错误做法：不同主题样式分散在多个文件，加载顺序决定最终效果，
.card--dark的border-color可能被后加载的 light 主题规则覆盖 - 正确结构：一个
card.css文件里同时定义.card--light和.card--dark的box-shadow与border，靠源码顺序+选择器一致性保障优先级 - 禁止在修饰符里再写嵌套选择器去改子元素边框，比如
.card--dark .card__header—— 边框应由.card__header自身的修饰符（如.card__header--bordered）控制
响应式+主题叠加时修饰符怎么排布
修饰符本身不处理响应式，但可以组合使用。关键在于：基础块类必须始终存在，修饰符只表达变体，且顺序要可读。
- 合法组合：
<div class="card card--dark card--shadow-heavy"> <li>不要写 <code>card--dark--shadow—— 这是非法嵌套修饰符，语义断裂，工具链无法识别 - 移动端需弱化阴影？加
card--no-shadow-mobile，但必须在媒体查询内控制显隐，而不是靠 JS 动态切换类名 - 如果边框粗细随主题变化又随状态变化（如禁用态变虚线），就拆成两个修饰符：
button--border-solid+button--disabled，CSS 中用组合选择器定义：.button.button--border-solid.button--disabled
实际项目中最容易被忽略的是：修饰符命名看似自由，但一旦脱离块上下文，就失去 BEM 的隔离价值。写
.card--shadow-heavy 不只是为了好看，更是为了将来能 grep 出所有用到重阴影的卡片，而不惊动按钮或表单控件。
