bem命名通过block__element和block--modifier规范类名，避免选择器污染；css变量统一管理可变值；按功能拆分文件并模块化组织；定期清理未用样式。
用BEM命名避免选择器污染和样式覆盖
大型项目里最常出现的不是样式写得少，而是改一处，三处崩——根本原因是类名语义模糊、嵌套随意、复用时互相干扰。.header .nav .item.active 这种选择器在另一个页面引入同名 .header 时，.item.active 就会误生效；更常见的是有人写 .btn-primary，有人写 .primary-btn，半年后没人敢删旧类。
BEM强制把类名拆成三段：block（独立功能单元，如 card）、block__element（必须依附 block 的子部分，如 card__title）、block--modifier（状态或变体，如 card--featured）。它不依赖工具链，纯 CSS 就能跑通。
-
card__title合法，__title或card__title__highlight都非法——浏览器不认识简写，嵌套 element 也违反 BEM 原则 -
card--featured必须和card一起用，不能单独写class="card--featured"，否则语义断裂 - 工具类（如
u-text-center）或全局主题类（如theme-dark）不套 BEM，硬塞反而别扭
用CSS自定义变量统一管理可变值
颜色、间距、断点这些值在大型项目里反复出现，分散在几十个文件里，改一个主色要 grep 十分钟，还容易漏。用 :root 定义变量，所有组件直接引用，改一处全更新。
:root 里放基础值，组件内用 var(--spacing-unit) 或 calc(var(--spacing-unit) * 2) 计算，比硬写 16px 或 32px 更灵活。注意：变量本身不带单位，var(--size) 返回的是纯数值，拼接单位要用 px 等后缀显式补上。
- 不要在
:root里定义组件专属值（如--card-shadow），只放跨模块通用值 - 变量名用连字符分隔，避免驼峰（
--primary-color✅，--primaryColor❌），CSS 不支持后者 - IE 不支持自定义变量，如需兼容，得配 PostCSS 插件降级，但 2026 年多数项目已可放弃 IE
按功能拆分文件 + 预处理器模块化组织
把所有样式塞进一个 style.css 是维护噩梦。真实项目中，文件结构比语法更重要。推荐按功能切分：_variables.less、_mixins.less、_base.less（重置/通用）、_components/（每个组件一个文件）。
Less/Sass 不是必须，但变量、混入、嵌套能显著减少重复。比如写一个响应式断点混入：.media-breakpoint-up(@breakpoint)，比每次手写 @media (min-width: 768px) 更可靠。但嵌套别超过三层，否则编译出的选择器太具体，后期难覆盖。
- 慎用
@extend：它会在 CSS 中合并选择器，看似节省体积，但调试时找不到来源，尤其和 BEM 混用易混乱 - 混入参数加默认值，比如
.button(@bg: var(--primary-color))，避免调用时漏传 - 导入顺序有影响：
_variables必须在最前，_components放最后，否则变量未定义就引用会报错
删掉没用的选择器和冗余声明
大型项目积累大量“曾经有用但现在没元素匹配”的规则，比如老导航栏的 .old-nav li a:hover，或者被 JS 动态移除 class 后残留的样式。这类空规则不渲染，但浏览器仍要解析，拖慢 CSSOM 构建。
用工具（如 purgecss 或 uncss）扫描 HTML 模板和实际 DOM，自动剔除未使用的类。人工检查时重点盯三类：
- 后代选择器层级超过三层，如
div.container ul.nav li a→ 改成.nav-link直接绑定 - 用
!important覆盖的规则，说明层叠逻辑已失控，该重构优先级而非打补丁 - 简写属性覆盖了不需要的子属性，如
margin: 10px 0 20px重置了margin-left，其实只想设margin-bottom
真正麻烦的不是怎么写新样式，而是怎么让旧代码不拖累新功能——BEM 约束命名、变量集中控制值、文件按功能切分、定期清理死代码，这四件事做扎实了，重构成本就卡在可控范围内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
