删冗余class会暴露html结构问题，因它迫使语义混乱显形：当div堆砌多个职责不明的class（如card、is-active）却无对应语义标签（article/section），说明html本身未正确使用语义化结构。
为什么删掉冗余class会暴露HTML结构问题
精简CSS类不是单纯“减代码”，而是把隐藏的语义混乱逼出来。当你发现某个 div 上堆了 card、item、is-active、theme-dark 四个类却无法说清每个类的职责，大概率是HTML本身没用对语义标签——比如本该用 article 或 section 的地方全靠 div + class 撑着。
删class时最容易误伤的三类HTML结构
不是所有class都能安全删，以下情况一删就出问题：
-
aria-*属性依赖的 class（如sr-only配合aria-hidden="true"） - JS 通过 class 名做 DOM 查询的钩子（如
js-toggle-menu），删了 JS 就失效 - 仅用于响应式断点的 class（如
md:hidden），删掉后小屏布局崩塌
真正该删的是哪些class
目标明确：只动那些既不参与逻辑、也不承载语义、纯为样式服务的“装饰性类”。典型特征包括：
- 命名含
-style、-v2、-new等无业务含义后缀 - 多个 class 共享完全相同的声明（如
text-gray-600和color-text-secondary都设color: #4b5563） - 只在单个组件内出现、且未被任何 BEM 命名规范约束的孤立 class（如
btn-blue出现在header里，但footer里用的是btn-primary）
删完class后必须验证的HTML变化
删类不是终点，而是检查HTML是否该重构的起点：
- 如果删掉
list-item后，发现内容其实是一组dl+dt/dd，那就该换语义标签 - 如果
container类一删，整个区块宽度失控，说明它实际承担了布局职责——该用main或section替代 - 如果多个
card类删掉后，只剩一堆没闭合的div，就得补上article或figure这类带隐含语义的容器
复杂点在于：class 是表层，HTML 结构才是根。删得越干净，越容易看清哪段 HTML 其实是“假语义”——看着像组件，实则只是 div 堆砌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
