css class名必须用kebab-case，如search-input；禁用下划线、驼峰、数字开头、中文及拼音；按功能命名而非样式；推荐bem结构；多class空格分隔；js操作用classlist api。
class名必须用kebab-case，别碰下划线和驼峰
浏览器不拦你写user_name或userName，但CSS里.user_name会和伪类:hover视觉混淆，而.userName在JS中调用el.classList.add('userName')时，和HTML源码里的语义完全脱节——它看起来像变量名，不是组件身份。
实操建议：
- 全小写 + 连字符，如
search-input、nav-main - 禁止数字开头：
3col-layout❌，改用three-col-layout✅ - 中文或拼音直接排除：
用户头像、yonghuTouxiang会导致Git diff乱码、Webpack警告、协作搜不到
别用样式描述命名，比如red-text或float-left
写class="red-text"等于给CSS上了一道“颜色锁”：哪天UI改成橙红，你得全局搜替换，还可能漏掉error-red这种变体。更糟的是，屏幕阅读器和自动化测试工具无法从这类名推断语义。
实操建议：
- 按功能或内容命名：
error-message代替red-text，sidebar-nav代替float-left - 位置控制交给上下文：
.article-content .sidebar-nav比给nav自己加float-left更可持续 - 工具类可存在，但必须隔离：
u-text-center、u-hidden，前缀u-明确标识其无业务语义
BEM不是银弹，但块-元素-修饰符结构不能少
不用BEM也行，但没结构就容易冒出btn、big-btn、btn-primary-active-hover这种失控命名。BEM的价值不在双下划线，而在逼你回答三个问题：这是什么块？它里面哪个部分？当前是什么状态？
实操建议：
- 简单组件用两段式足够：
card（块）、card-title（元素）、card--loading（修饰符） - 避免过度嵌套：
card__title__link❌，应为card__title-link——link是title的组成部分，不是独立层级 - 修饰符要语义化：
card--featured比card--blue靠谱；后者换主题色就失效
多class组合是常态，空格分隔别手抖
很多人误以为class="user-item active"里的active是“激活态”，其实它只是另一个独立类，和user-item完全解耦。CSS里.active可以定义任何样式，甚至和user-item毫无关系。
实操建议：
- 多个class用空格分隔，不是逗号也不是连字符：
class="btn btn-primary is-loading"✅，class="btn,btn-primary"❌ - JS操作永远走
classListAPI：el.classList.add('is-loading')、el.classList.replace('idle', 'loading') - 别用
el.className = 'active'覆盖全部class——会把user-item、is-collapsed全干掉
最常被忽略的其实是“命名即契约”：一旦发布，user-avatar这个类名就承诺了它代表用户头像，而不是某个带圆角的灰色图片。改名成本远高于写对第一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
