HTML class命名应以功能或内容角色为核心，用kebab-case小写连字符格式，复杂场景可选BEM规范，工具类须加u-等前缀隔离。
HTML 分组样式名称（即 class）要具备良好语义，关键不是“起个好听的名字”，而是让名字准确回答一个问题：这个分组在页面中扮演什么角色？ 它不是“看起来什么样”，也不是“用什么标签包着”，而是“它是什么内容、服务什么功能”。
用功能或内容角色命名，而非外观或结构
比如一组用于展示用户信息的区域，应命名为 user-profile，而不是 flex-col（布局方式）、blue-box（颜色样式）或 div-3（无意义编号）。前者在换主题、改布局、加暗色模式时依然成立；后者一旦样式调整，类名就变成误导信息。
-
✅ 推荐：
search-form、product-list、notification-banner——直指用途 -
❌ 避免：
float-left、margin-20、card-wrapper（wrapper 是冗余词，card 已隐含容器含义）
统一用 kebab-case，小写，不带特殊字符
连字符（-）是 HTML/CSS/JS 全链路最安全、最通用的单词分隔符。它无需转义、编辑器友好、Git diff 清晰，且符合 CSS 选择器书写习惯。
-
✅ 正确：
main-navigation、article-meta、faq-section -
❌ 错误：
main_navigation（CSS 中需写成.main\_navigation才能匹配）、mainNavigation（易与 JS 变量混淆）、Main-Nav（首字母大写不必要，且部分工具链不友好）
复杂分组可用 BEM 明确层级与状态
当一个分组内部结构较深、需要复用或支持多种变体时，BEM 提供清晰的命名逻辑：用双下划线（__）表示从属关系，双短横（--）表示状态或修饰。
立即学习“前端免费学习笔记（深入）”；
-
pricing-card是独立模块（Block） -
pricing-card__header和pricing-card__feature-list是其子元素（Element） -
pricing-card--featured表示该卡片为推荐版本（Modifier），pricing-card__button--disabled表示按钮当前不可用
注意：BEM 不是必须套用的模板，重点是通过命名让人一眼看出“谁属于谁”“现在是什么状态”，避免出现 card-header-title-link 这类模糊又冗长的拼接。
工具类需隔离前缀，不混入语义流
像居中、隐藏、文字对齐这类纯行为控制，可存在，但必须加前缀（如 u- 或 util-）与语义类区分开，防止语义污染。
-
u-hidden、u-text-center、u-flex-col—— 明确是“工具”，非内容角色 - 不要把
u-hidden和user-profile混在同一语境下讨论职责；它们服务于不同层级的关注点
