直接删除深嵌套多伪类选择器比配置purgecss更高效；优先用[data-role]等属性选择器替代.class .class .class链式写法，更短、更稳定、无命名冲突；tailwind项目禁用独立purgecss插件，需正确配置postcss顺序与safelist，避免误删动态类名；bem应服务于模块内聚，而非堆砌层级。
直接删掉那些嵌套四层还带多个:not()和:focus-visible的组合选择器，比调PurgeCSS插件更立竿见影。
用属性选择器替代深嵌套类名链
浏览器匹配.card .header .title .text--large这种选择器，开销远高于[data-role="section-title"]。前者依赖DOM结构稳定，后者只认属性值，DOM微调也不崩。
- 把语义信息从class挪到
data-属性里，比如<h2 data-role="section-title"></h2>→ 对应写[data-role="section-title"] - 避免
.container .wrapper .content .main p这类“结构假设型”写法，换成p[data-type="lead"]更可靠 - 属性选择器长度通常比等效类名链短15–20字符，且无需担心命名冲突
PurgeCSS 配错顺序或没配 safelist 就等于白跑
postcss.config.js里插件顺序错一位，产出的CSS可能只剩@charset "UTF-8";；没加正则/^(hover|group-hover|data)-/，Tailwind的hover:bg-blue-500和[data-state=open]全被清空。
- 必须按顺序：postcss-import → tailwindcss → @fullhuman/postcss-purgecss → autoprefixer → cssnano
-
cssnano要关掉discardUnused，否则和PurgeCSS重复干活，二次误删 - 动态拼接的类名（如
className={`modal ${isOpen ? 'is-open' : ''}`）必须进safelist，否则默认提取器根本看不到 - Tailwind项目别额外装
@fullhuman/postcss-purgecss——它和tailwindcss内置Purge功能冲突
BEM命名天然抑制选择器膨胀
看到.user-card__header__title--highlighted就该停一下：这个--highlighted修饰符真需要绑定在__header__title上？还是抽成.user-card__title--highlighted更合理？
- 拒绝
.sidebar .list .item .link.active，改用.sidebar__link--active，既短又可预测 - 一旦发现样式得靠
.dark-theme .btn才能生效，说明样式没内聚，该用.btn--theme-dark替代 - BEM不是为守规矩，是用命名倒逼你思考“这个样式到底属于哪个模块”，而不是靠父级类名硬压
真正难的不是写对一条选择器，而是当[data-state=open]和group-hover:text-red-500同时存在时，你得判断哪些该进safelist、哪些该重构为属性驱动——工具只能清掉看得见的，看不见的冗余还在DOM里等着你手动拆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
