html元素的class名是写出来的标识符，合法写法为class=”xxx”（小写属性名、引号包裹、空格分隔多类）；bem命名如card__title可明确层级关系；操作时需注意ie兼容性、选择器限制及dom就绪时机。
直接说结论：HTML 元素的 class 名不是“设置”出来的，而是写出来的；命名本身不触发任何样式或行为，它只是个标识符——真正起作用的是你后续用 CSS 选中它、用 js 查询它、或者团队靠它协作理解结构。
class 属性怎么写才合法
HTML 中给元素加类名，只有一种标准写法：class="xxx"。注意几个硬性细节：
-
class是属性名，必须小写，不能写成Class或CLASS - 值必须是字符串，用双引号或单引号包裹（推荐双引号，符合 HTML 标准）
- 多个类名用空格分隔，不能用逗号、连字符开头、不能含空格以外的空白符（比如换行、制表符）
- 以下写法都错：
class="btn, primary"、class="-header"、class="nav-item active"
正确示例：<div class="card card--hover is-active"></div>
为什么 BEM 风格的 class 名（如 card__title）比 card-title 更可靠
因为浏览器不关心命名风格，但人和工具会。BEM（block__element--modifier）本质是用命名约定规避歧义，尤其在多人协作或组件复用时：
立即学习“前端免费学习笔记（深入）”；
-
card-title容易被误读为“卡片的标题”，也可能是“一种叫 card-title 的独立组件” -
card__title明确表达“这是card块内部的title元素”，CSS 里写.card__title就不会意外命中其他title - 连字符
-在 class 名里合法，但__和--是人为约定，不增加解析负担，也不影响性能 - 注意：不要为了 BEM 而嵌套过深，
card__header__title__link就失控了——元素层级应由 DOM 结构决定，不是靠 class 名体现
JS 里通过 class 操作元素时容易漏掉的兼容点
用 document.querySelector(".btn") 或 el.classList.add("active") 看似简单，但实际出问题常在这几处：
-
classList在 IE10+ 才完全支持；IE9 只能靠className字符串拼接，且要注意空格处理（比如重复添加、删除失败） -
querySelector不支持伪类选择器，document.querySelector(".btn:disabled")会直接报错SyntaxError - 多个 class 名同时操作时，
el.classList.toggle("a b")是错的——toggle只接受单个字符串，要写成el.classList.toggle("a"); el.classList.toggle("b") - 服务端渲染（SSR）或动态插入的元素，如果 JS 运行早于 DOM 就绪，
querySelector返回NULL，必须加判空或用DOMContentLoaded
class 名要不要带语义？比如用 error-message 还是 text-red-500
取决于你是否需要维护样式与含义的映射关系。纯原子类（如 text-red-500）适合 Tailwind 这类工具链，但有隐性成本：
- HTML 里堆满样式类，会让结构意图模糊：“这个 div 是弹窗主体，还是错误提示，还是临时广告？”
- 换主题或改设计时，得全局搜索替换所有
bg-blue-600，而不是只改一处.card-header的 CSS - 无障碍（a11y）和 seo 不依赖 class 名，但可读性差的 class 会让测试、审查、协作变慢
- 折中方案：基础组件用语义名（
modal-header），修饰状态用 BEM modifier（modal-header--error），再配合少量原子类做微调（font-bold）
真正难的不是怎么命名，而是整个项目里有没有一致的约束机制——比如用 ESLint + custom rule 检查 class 命名格式，或者用 webpack 插件在构建时报出非法 class 名。