提升选择器复用性：类名规范与结构优化方法

优化方向：

• 优先用单层类名直接控制元素，如给链接加 nav-link，而非依赖父级结构推导
• 用 :is() 或 :where() 合并同类选择器，减少重复声明，例如 :is(.btn, .link).is-active
• 对必须依赖结构的场景（如文章内嵌代码块样式），用属性选择器收口：[data-md] code 比 article pre code 更耐改

避免 ID 和标签选择器用于样式控制

#header 看似明确，但 ID 在页面中必须唯一，导致组件无法复用；h1、ul 这类标签选择器则把样式和 HTML 语义强绑，换用 div role="heading" 就失效。

真实影响：

• ID 选择器特异性过高（100），常逼迫后续用 !important 或更深选择器覆盖，形成恶性循环
• 标签选择器缺乏语义隔离，一个 ul { margin: 0 } 可能意外清掉导航菜单外边距
• 改用类名后，可通过 class="list-unstyled" 显式控制，意图清晰且可组合

用自定义属性辅助状态管理，减少动态类名爆炸

为每个交互状态（hover / active / disabled / loading）都写一个类，很快会冒出 btn-disabled-loading、btn-hover-active 这类组合类，维护成本陡增。

更可持续的做法：

• 用 data-state 或 data-loading 等自定义属性标记状态，CSS 写成 [data-loading] { opacity: 0.6; pointer-events: none; }
• JS 控制状态只需改属性值，不操作 classList，避免 class 增删逻辑错乱
• 搭配 :has() 可实现父子联动，比如 .card:has([data-error]) { border-color: #f00; }，无需额外加 error 类到 card 上

终于介绍完啦！小伙伴们，这篇关于《提升选择器复用性：类名规范与结构优化方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！