语义化类名应准确表达元素用途，推荐使用BEM规范如.btn-primary、.card__title、.card--featured，结合HTML5语义标签并保持命名简洁一致。
在HTML5开发中，选择合适的类名不仅有助于代码的可读性和维护性，还能提升团队协作效率。语义化类名的核心是让类名准确表达元素的用途或内容，而不是样式表现。
使用语义化关键词命名
类名应反映内容或功能，而非外观。避免使用表示样式的词如red、bold、left等。
- 推荐：.btn-primary、.user-avatar、.search-form
- 不推荐：.red-button、.big-text、.float-left
采用BEM命名规范（Block__Element--Modifier）
BEM是一种广泛使用的CSS命名方法，能清晰表达组件结构关系，减少命名冲突。
- 块（Block）：独立的功能模块，如.card
- 元素（Element）：块的组成部分，用双下划线连接，如.card__title
- 修饰符（Modifier）：块或元素的状态或变体，用双连字符，如.card--featured、.btn--disabled
保持简洁与一致性
类名应简短但不失明确，项目内统一风格很重要。
立即学习“前端免费学习笔记（深入）”；
- 使用小写字母和中划线分隔单词（kebab-case），如.main-navigation
- 避免缩写造成歧义，如.usr不如.user
- 同一组件在不同页面保持相同类名，便于复用样式
结合HTML5语义标签合理使用类名
HTML5提供了丰富的语义标签如header、nav、article等，类名应补充而非重复标签含义。
- 例如：比
