CSS类名仅允许字母、数字、下划线和短横线，不能以数字或双短横线开头，禁用中文、空格及特殊字符；非法命名导致选择器静默失效，JS查询返回null，样式不生效，且工具链如CSS Modules需同步引用生成名。
class名里用了中文或空格，浏览器直接无视
CSS选择器遇到非法字符会静默失败，不是报错，而是压根不生效。比如写 .用户头像 或 .btn primary，浏览器解析时会在空格或中文处截断，实际只认 .btn，后面全丢弃。
常见错误现象：document.querySelector('.用户头像') 返回 null；样式表里写了但元素没反应；DevTools 的 Styles 面板里根本看不到对应规则。
- 只允许字母、数字、下划线
_、短横线- - 不能以数字开头（
1col❌，col1✅） - 不能以两个短横线开头（
--theme是 CSS 自定义属性语法，不是 class） - 空格、中文、$、@、.、#、/ 等一律禁止
用 JavaScript 动态加 class 时命名不一致
前后端协作或模板拼接中，class 名在 HTML、CSS、JS 三处必须完全一致。大小写、连字符数量、下划线位置差一个，就匹配不上。
使用场景：Vue 的 :class、React 的 className、原生 element.classList.add()。
立即学习“前端免费学习笔记（深入）”；
- 检查是否混淆了
my-component和myComponent（后者是 JS 命名习惯，但不是合法 class） - 避免用
data-属性代替 class 来做样式控制（data-status="active"≠.active） - ES6 模板字符串里容易漏转义，比如
`item-${index}-active`中index为0时变成item-0-active——合法，但若为-1就变item--1-active，开头双短横线无效
预处理器（Sass/Less）嵌套导出 class 名被意外截断
Sass 的 & 嵌套本身不改名，但一旦混用 @at-root、#{} 插值或 BEM 拼接，就可能生成含非法字符的 class。
性能影响：非法 class 不影响编译，但会导致运行时选择器失效，排查成本远高于重命名。
- 插值
.#{$prefix}-btn要确保$prefix变量值符合规范（不能是"header nav"） - BEM 中
&__item是安全的，但{'--disabled'}会产出.comp--disabled，开头非字母，无效 - PostCSS 插件如
postcss-bem默认生成.block__element--modifier，注意双短横线在 modifier 位置是允许的（它不在开头），但--modifier单独作 class 就不行
工具链自动转换 class 名引发兼容问题
Webpack 的 css-loader 开启 modules 后，class 会被哈希化（如 Button_button__abc123），此时你写的原始名仅在源码中存在，运行时已替换。如果 JS 里还硬编码 document.querySelector('.button')，必然找不到。
容易被忽略的地方：服务端渲染（SSR）时，CSS 模块名需与客户端完全一致，否则 hydrate 失败，样式闪烁或丢失。
- 启用 CSS Modules 后，JS 中必须用
import styles from './Button.module.css'，再通过styles.button获取真实 class 名 - 全局 class（如重置样式、第三方库覆盖）要加
:global(.el-button)显式声明，避免被模块化 - Tailwind 的
@layer或!important不解决命名问题，只解决优先级——命名错了，再高优先级也挂
