BEM类名应限于一级元素和修饰符，避免嵌套过深；块名需语义化，元素名用名词，修饰符描述“是什么”；CSS-in-JS/CSS Modules宜显式命名变量；Tailwind应封装utility为语义化组件类；自动缩类风险高，优先保障可读性与调试性。
用 BEM 命名但别嵌套过深
类名爆炸的根源常是盲目套用 BEM 的 block__element--modifier 模式，尤其在组件嵌套时写成 header__nav__item__link--active。这既难读又难维护，CSS 选择器权重也悄悄变高。
实际只需一级元素、一级修饰符：一个 header 块里，header__nav 是元素，header__nav--mobile 是修饰符；nav__item 应属于独立 nav 块，而非 header 的子级。
- 块名必须语义清晰，比如
card而非section-2 - 元素名用名词（
card__image），不用动词或状态（避免card__showImage） - 修饰符只描述“是什么”，不描述“为什么”（
button--primary✅，button--onHomepage❌）
CSS-in-JS 或 CSS Modules 怎么控制类名长度
这类方案本意是解决全局污染，但默认生成的哈希类名（如 Button_button__kx9f2）反而让 HTML 更难 debug。关键不是禁用哈希，而是用好 className 显式命名。
以 CSS Modules 为例：import styles from './Button.module.css' 后，用 styles.root 而非 styles['button-root'] —— 前者可直接在 JS 中重命名变量，后者徒增字符串拼接和 typo 风险。
立即学习“前端免费学习笔记（深入）”；
- Webpack 的
localIdentName配置里保留[name]__[local]，去掉哈希（开发期够用） - React 中用
clsx合并类名时，优先传入对象而非字符串：clsx({ [styles.active]: isActive }) - 不要把
styles整个解构：const { root, label, icon } = styles—— 一旦组件重构，这些变量名容易和真实语义脱钩
Tailwind 的 utility class 真的不会让 HTML 变脏？
会，而且很隐蔽。比如 class="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors" 看似直观，但复制粘贴、复用、响应式断点切换时极易出错。更麻烦的是，它把样式逻辑从 CSS 文件挪到了 HTML，违反关注点分离。
真正省事的做法是封装：用 @layer components 定义语义化类名，再用 @apply 组合 utility：
.btn {
@apply inline-flex items-center px-4 py-2 font-medium rounded focus:outline-none;
}
.btn-primary {
@apply bg-blue-600 text-white hover:bg-blue-700;
}
- 避免在 HTML 中写多于 5 个 utility class，否则该抽组件或抽象类了
-
sm:、md:等响应式前缀超过 2 种，说明布局逻辑已复杂到该用媒体查询或 JS 控制 - 不要用
!important强行覆盖 utility —— 这等于放弃 Tailwind 的设计约束，后续维护成本翻倍
PostCSS 插件能自动缩短类名吗
能，但风险大。postcss-short 或 postcss-bem-linter 类工具可在构建时压缩类名（如 header__nav → h__n），但调试时 source map 不一定准，团队协作中 CSS 和 HTML 的类名对不上，查 bug 成本远高于节省的那几个字节。
更稳妥的是用 cssnano 的 reduceIds 和 discardComments 做轻量压缩，保留可读性。真正需要极致体积的场景（如嵌入式 Webview），才考虑类名哈希 + sourcemap 映射表，且必须配套上线前校验脚本。
- Webpack 的
MiniCssExtractPlugin默认不压缩类名，需显式配cssnano - Vue 单文件组件中
<style scoped></style>已自带属性选择器哈希，无需额外缩类 - 任何自动缩写类名的插件，上线前务必检查 DevTools 中 computed styles 是否仍能定位到源码行号
类名长度问题本质是语义粒度和协作边界的权衡。写太短，别人看不懂；写太长，自己改着累。最常被忽略的一点：HTML 中出现重复的长类名组合（比如三个地方都写 article-card__title--featured），不是该缩它，而是该意识到——这里已经该抽成自定义元素或 React/Vue 组件了。
