应使用 data- 属性替代 class 作为样式钩子，明确分离结构语义与样式意图；优先单类名、bem 修饰符或属性选择器控制范围；借助 css 自定义属性解耦设计变量，强化团队契约意识。
用 data- 属性替代 class 作为样式钩子
直接用 class 控制样式，等于把表现逻辑硬编码进 HTML 结构里——一旦组件重构、DOM 层级变动，.sidebar .item .title 这类选择器立刻失效。改用 data- 属性（如 data-role="header"）做样式锚点，能明确区分「结构语义」和「样式意图」。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只在必要时加
data-，比如data-state="loading"、data-variant="compact"，避免泛滥成data-id="123"这类无样式意义的属性 - CSS 中用属性选择器：
[data-role="header"] { font-size: 1.2em; }，不依赖父级或兄弟关系 - JavaScript 操作状态时同步更新
data-属性，而不是靠增删class来驱动样式（否则样式和 JS 行为又耦合了） - 注意 IE11 支持
[attr]，但不支持[attr^="val"]等复杂属性选择器，若需兼容得降级处理
避免深度嵌套选择器（如 .card .content .text p:first-child）
这类选择器对 DOM 变动极度敏感：哪怕中间加一层 <div class="wrapper">，整个规则就挂掉。它还隐含性能代价——浏览器要从右往左匹配，<code>p:first-child 先找所有段落，再逐个向上查祖先，层级越深越慢。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 单类名优先：用
.text-body替代.card .content .text p - 需要区分上下文？用 BEM 的修饰符：
.text--small、.text--in-card，而非靠嵌套 - 真要限定范围（比如仅在弹窗内生效），用属性或顶层 class 控制：
[data-modal] .text-body或.modal .text-body，但后者仅限顶层容器 class 不随结构变化 - 用浏览器 DevTools 的「强制状态」功能测试：手动删掉某层 DOM，看样式是否意外保留或丢失——这是检验嵌套是否过深的最快方式
CSS-in-JS 或 CSS Modules 的 scope 隔离本质
它们不是“消除耦合”，而是把耦合从全局 CSS 转移到模块内部，并用构建时重命名（如 Button_root__abc123）保证唯一性。关键在于：组件的样式作用域由 JS 模块边界定义，而非 HTML 层级。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- CSS Modules 下，用
:global(.legacy-header)显式透出需复用的公共样式，避免误以为所有 class 都被隔离 - 不要在 CSS-in-JS 中写
& .child这类嵌套——它生成的 class 名仍会绑定到具体子元素上，DOM 结构一变照样崩 - 动态样式（如
color: {props.theme === 'dark' ? '#fff' : '#000'}）必须走内联 style 或 CSS 变量，不能靠切换 class，否则又回到结构依赖的老路 - 注意 SSR 场景下，CSS-in-JS 的服务端渲染需确保 class 名和服务端一致，否则首屏样式错乱
用 CSS 自定义属性（--color-primary）解耦设计变量与选择器
颜色、间距、圆角这些值本身不该和某个 class 绑定。把它们抽成 --color-primary，再让 .button、.card 都引用它，就能在不改任何选择器的前提下批量调整视觉风格。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 变量命名聚焦用途而非值：
--spacing-md比--spacing-16更健壮，未来换为 18px 也不用改 HTML 或 CSS - 用
:root定义基础变量，组件内用var(--color-primary)引用；主题切换时只需覆盖:root下的变量值 - 不要用变量存选择器逻辑，比如
--selector-hover: &:hover—— CSS 不支持这种语法，且违背变量本意 - 注意 Safari 对
var()在@keyframes和伪元素中的支持较晚（iOS 15.4+ 才稳定），关键动画慎用
class="red-text"，整套解耦努力就从内部瓦解了。
