类名是写在html元素上的标识符，用于css选择、js操作和团队协作；应语义化命名（如“article-title”）、采用kebab-case格式、避免外观描述，工具类需加u-前缀，bem结构适用于复杂模块。
类名不是“设置”出来的，而是写在 HTML 元素上的标识符，它的作用是让 CSS 能选中、JS 能操作、团队能理解——真正起效的是后续的样式定义和逻辑绑定，不是 class 本身。
语义优先：用“它是什么”代替“它长什么样”
class 名应描述内容或功能，而非外观。比如写 class="article-title" 比 class="big-blue" 更可靠：前者在换主题、改字体时依然准确表达意图；后者一旦蓝色取消，类名就失去意义。
- ✅ 推荐：
user-avatar、search-submit、error-message - ❌ 避免：
float-left、red-text、margin-20（除非是统一约定的工具类，如u-text-center） - 工具类可存在，但需加前缀（如
u-或util-），且仅用于无语义的通用行为
命名格式：统一用 kebab-case，禁用下划线和驼峰
HTML 和 CSS 对大小写不敏感，但连字符（-）是唯一被广泛支持、无需转义、阅读清晰的单词分隔方式。
- ✅ 正确：
nav-item、product-card、main-content - ❌ 错误：
nav_item（CSS 中需转义才能选中）、navItem（不符合 CSS 选择器习惯）、1st-section（数字开头不推荐） - 所有字母小写，不包含空格、中文、特殊符号（如点、冒号）
BEM 结构：明确组件层级与状态
对复用性强或嵌套深的模块（如卡片、菜单），BEM 能避免歧义和样式泄漏：block__element--modifier 的三段式结构一目了然。
-
card是独立模块（Block） -
card__title是其子元素（Element），不会和另一个模块的title冲突 -
card--expanded或card__button--disabled表示状态（Modifier） - 避免过度嵌套，如
card__header__title__link—— DOM 层级靠结构体现，不靠 class 名堆叠
多类并用与常见陷阱
一个元素可以同时拥有多个 class，用空格分隔，这是合法且常用的做法，但操作时要注意细节。
- 正确写法：
<div class="card card--hover is-active"></div> - JS 中增删类要用
classList方法：el.classList.add("active")，而不是拼字符串 -
toggle("a b")无效，必须分开调用：el.classList.toggle("a"); el.classList.toggle("b") - IE9 不支持
classList，需降级为操作className字符串，并手动处理空格去重
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
