class 是样式归类首选，因可复用、无唯一性限制且不绑定语义；必须与 css 规则配对生效；.classname 写法需注意空格与连写差异；多 class 共存时按权重和声明顺序叠加；:is() 和 :where() 可简化统一样式但权重不同；类名应职责明确。
直接用 .classname 就能批量控制所有带该 class 的元素，无需 JS、不改 HTML 结构、浏览器原生支持——这是最轻量也最可靠的样式归类方式。
为什么 class 属性是样式归类的首选
class 是 HTML 的全局属性，天生设计为复用：一个值可出现在任意多个标签上，且一个标签能同时携带多个 class。它不像 id 那样被强制要求唯一，也不像标签选择器那样绑定语义结构。这意味着你完全可以在 div、button、span 上统一加 class="error"，然后用一条 .error { color: #d32f2f; } 全局生效。
常见错误是把 class 当成“备注”或“临时标记”，结果写成 class="btn red big" 却没在 CSS 里定义对应规则——这等于白加。class 必须和 CSS 规则配对才起作用。
.classname 选择器的写法与典型误写
CSS 中写 .btn 就匹配所有 class="btn" 的元素；但稍不留神就会写错：
-
.btn（末尾有空格）→ 变成“后代选择器”，实际匹配的是“任意元素内部的 btn 类元素”，不是你想批量控制的目标 -
.btn .icon（中间有空格）→ 匹配的是class="icon"且在class="btn"内部的元素，不是所有带btn的元素 -
.btn.primary（无空格）→ 正确，表示同时含btn和primary两个 class 的元素，顺序无关
多 class 共存时的样式叠加逻辑
一个元素可以写 class="card card--large is-disabled"，浏览器会把所有匹配的规则都应用上去，冲突属性按权重和声明顺序决定最终值：
- 每个 class 选择器权重都是 10，同权重时后声明的规则覆盖先声明的（不是 HTML 中 class 的书写顺序）
-
.card { padding: 12px; }和.is-disabled { padding: 8px; }同时存在，padding 最终取 8px，因为后者在 CSS 文件中靠后 - 避免靠“写在后面就生效”来赌顺序，应主动用组合类如
.card.is-disabled显式提高局部优先级
:is() 和 :where() 如何简化多类统一样式
当你要给十几个不同 class 的元素设同一套基础样式（比如 .title、.subtitle、.caption 都要 font-size: 0.875rem），传统写法是逗号分隔：.title, .subtitle, .caption { ... }。但维护麻烦，新增类就得改 CSS。
更现代的做法是用 :is()：
.container :is(.title, .subtitle, .caption) {
font-size: 0.875rem;
line-height: 1.4;
}
注意两点：
-
:is()会继承其外层选择器的权重，比如上面例子整体权重 = 容器选择器权重 + 1（:is 内部不额外加权） -
:where()效果相同但权重为 0，适合做“兜底样式”，但兼容性略差（IE 完全不支持，Chrome 105+、Firefox 103+ 起支持）
真正容易被忽略的是：类名归类不是“为了少写代码”而堆砌 class，而是让每个 class 承担明确职责——比如 sr-only 只管屏幕阅读器隐藏，visually-hidden 可能还兼顾动画过渡，混用会导致语义模糊、后期难定位问题。
