HTML基础如何使用类名规范管理HTML元素的样式分类

类名是写在HTML元素上的标识符，用于CSS选择、JS操作和团队协作；应语义化命名（如“article-title”）、采用kebab-case格式、避免外观描述，工具类需加u-前缀，BEM结构适用于复杂模块。

类名不是“设置”出来的，而是写在 HTML 元素上的标识符，它的作用是让 CSS 能选中、JS 能操作、团队能理解——真正起效的是后续的样式定义和逻辑绑定，不是 class 本身。

语义优先：用“它是什么”代替“它长什么样”

class 名应描述内容或功能，而非外观。比如写 class="article-title" 比 class="big-blue" 更可靠：前者在换主题、改字体时依然准确表达意图；后者一旦蓝色取消，类名就失去意义。

1. ✅ 推荐：user-avatar、search-submit、error-message
2. ❌ 避免：float-left、red-text、margin-20（除非是统一约定的工具类，如 u-text-center）
3. 工具类可存在，但需加前缀（如 u- 或 util-），且仅用于无语义的通用行为

命名格式：统一用 kebab-case，禁用下划线和驼峰

HTML 和 CSS 对大小写不敏感，但连字符（-）是唯一被广泛支持、无需转义、阅读清晰的单词分隔方式。

1. ✅ 正确：nav-item、product-card、main-content
2. ❌ 错误：nav_item（CSS 中需转义才能选中）、navItem（不符合 CSS 选择器习惯）、1st-section（数字开头不推荐）
3. 所有字母小写，不包含空格、中文、特殊符号（如点、冒号）

BEM 结构：明确组件层级与状态

对复用性强或嵌套深的模块（如卡片、菜单），BEM 能避免歧义和样式泄漏：block__element--modifier 的三段式结构一目了然。

1. card 是独立模块（Block）
2. card__title 是其子元素（Element），不会和另一个模块的 title 冲突
3. card--expanded 或 card__button--disabled 表示状态（Modifier）
4. 避免过度嵌套，如 card__header__title__link —— DOM 层级靠结构体现，不靠 class 名堆叠

多类并用与常见陷阱

一个元素可以同时拥有多个 class，用空格分隔，这是合法且常用的做法，但操作时要注意细节。

1. 正确写法：<div class="card card--hover is-active"></div>
2. JS 中增删类要用 classList 方法：el.classList.add("active")，而不是拼字符串
3. toggle("a b") 无效，必须分开调用：el.classList.toggle("a"); el.classList.toggle("b")
4. IE9 不支持 classList，需降级为操作 className 字符串，并手动处理空格去重