删掉未使用的CSS类比优化更有效，因其直接消除“僵尸代码”对协作效率和重构信心的损害，而压缩体积等手段无法解决此问题。
为什么删掉未使用的CSS类比优化更有效
很多开发者花时间压缩CSS体积、合并选择器，却忽略了一个事实：90%的维护负担来自模板里带进来的“僵尸代码”。这些未被DOM实际调用的类名和规则，不拖慢加载速度，但会显著拉低协作效率和重构信心。
- 用浏览器 DevTools 的
Coverage面板（Ctrl+Shift+P → 输入 “Coverage”）可直观看到哪些 CSS 规则完全没执行，灰掉的部分就是安全删除区 - 别信人工标记的
/* unused */注释——它们常过期，且无法反映真实 DOM 结构变化 - 像
.btn-primary:hover:active:focus这种长链选择器，必须确认 HTML 中同时存在带btn-primary类、且能触发全部三种状态的元素；缺一不可，否则整条规则可删 - 删除前先全局搜索该类名在 JS 中是否被引用（如
document.querySelector('.old-modal')），避免 JS 逻辑断裂
外部CSS文件是结构与样式解耦的底线
把样式写进 <style> 标签或 style 属性里，短期看着快，长期等于给项目埋雷。浏览器无法缓存内联样式，每次加载都得重传整个 HTML；更麻烦的是，多个页面共用导航或卡片时，你得在每个文件里复制粘贴同一套规则。
- 所有通用样式必须抽离为独立
main.css，通过<link rel="stylesheet" href="assets/css/main.css">引入 - 仅极简场景（如某页临时 Banner）才允许用
<style>块，且必须加注释说明“仅本页有效”，上线前需评估是否值得单独维护 - 绝对禁止
<div style="margin: 10px;">这类内联样式——它优先级过高，后期几乎无法被外部 CSS 覆盖，调试时会卡死
BEM命名不是炫技，是防止改错的保险丝
用 div1、box2 这类名字，等于把结构逻辑藏进 CSS 里。后来想改首页的卡片样式，却不敢动 box2，因为不确定它是否也控制着联系页的表单布局。
- 采用 BEM 规范：
product-card（块）、product-card__title（元素）、product-card--featured（修饰符） - 避免用位置或样式特征命名，比如
left-sidebar（布局变就失效）、red-button（换主题色就得重命名） - 团队内统一前缀：
u-text-center（工具类）、js-dropdown-trigger（仅作 JS 钩子，不带样式）
HTML语义化不是为了好看，是为了“关掉CSS还能读”
很多页面一禁用样式就变成满屏 div 堆叠，说明 HTML 没表达出内容层级和意图。这不仅影响 SEO 和屏幕阅读器，也让后续加无障碍支持或响应式适配变得异常脆弱。
立即学习“前端免费学习笔记（深入）”；
- 用
<header>、<nav>、<section>、<footer>替代无意义的<div class="header"> - 标题必须用
<h1>–<h6>逐级嵌套，不能只靠 CSS 改字体大小来模拟 -
<img>必须带alt属性，哪怕只是空字符串alt=""，也比缺失强
真正难的不是写出零冗余的代码，而是让每个标签、每个类名、每个属性，都承担明确且不可替代的职责。一旦某个类名删掉会导致三处页面崩掉，说明它早该被拆解或重命名了。
