直接提取.btn或.card作公共块加剧冗余，因未区分结构归属与视觉变体；需确保块语义完整、职责单一、dom自包含，如.button、.card，而非纯样式类，并配合css变量统一控制可复用样式。
为什么直接提取 .btn 或 .card 作为公共块反而加剧冗余
因为没区分「结构归属」和「视觉变体」。把所有按钮都塞进一个 .btn 类，后续为了适配 Header、Modal、Sidebar 里的不同边距/字体/禁用态，只能靠加 !important、写后代选择器（如 .header .btn）或堆砌修饰类（.btn.header-btn）。结果是：样式表里出现十几种“按钮”，但没人说得清哪个该删、哪个还在用。
真正可复用的「公共块」必须满足三个条件
它得是语义完整、职责单一、DOM 结构自包含的单元，比如 .button、.card、.form-field —— 而不是 .primary、.large 这类纯样式描述。
-
.button是块：有自己完整的 HTML 结构（<button></button>或带图标/加载态的封装），不依赖父容器存在 -
.button__icon是元素：只出现在.button内部，不单独使用 -
.button--primary是修饰符：描述业务状态（主操作），不是尺寸或颜色本身；.button--small可以，但.button--blue不行——颜色应由设计系统变量--color-primary控制
如何从旧项目里安全提取出高复用性公共块
别一上来就重命名全量文件。先锁定高频冲突点：
- 用
npx purgecss扫出未被引用的类名，删掉那些孤立的.text-center、.mt-2类 - 在 DevTools 的 Styles 面板里，筛选被划掉的属性，右键 → “Break on attribute modification”，点几次 UI 操作，看哪些旧样式被动态覆盖
- 对每个疑似公共块（如所有带搜索功能的区域），统一收口为
.search-bar，内部子结构强制用__绑定：.search-bar__input、.search-bar__submit，禁止出现.search-bar .btn - 检查 HTML 中是否真写了对应类名——
postcss-bem-linter只校验 CSS 写法，不验证 DOM，漏写类名会导致样式失效却查不到原因
BEM 公共块 + CSS 自定义属性才是减少冗余的关键组合
只靠 BEM 命名能砍掉嵌套选择器带来的体积膨胀，但颜色、间距、圆角等值仍可能重复声明。必须配合变量下沉：
- 变量只定义在块级作用域：
:root或.button根选择器下定义--button-bg、--button-padding，.button__icon和.button--loading直接复用，不另起变量 - 避免
--button-primary-bg、--button-secondary-bg并列声明——改主题时要改十几处；应统一用--color-primary，让.button--primary通过background-color: var(--color-primary)组合使用 - 注意构建工具兼容性：若需支持 IE11，禁用
postcss-bem的属性选择器优化（如[class^="button"]），坚持用类名直连
最常被忽略的一点：BEM 的「块」不是越小越好。.button__icon 不能脱离 .button 单独抽象成公共块，否则就退化回老式原子类；它的复用性来自所属块的稳定，而不是自身命名多“通用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
