class属性需与CSS选择器完全匹配，推荐用kebab-case命名、空格分隔多class，避免语义化过强；原子化组合基础类与修饰类，注意加载顺序和优先级，必要时采用BEM规范明确职责边界。
class 属性怎么写才不被浏览器忽略
HTML 中的 class 不是随便加个名字就能生效的，必须和 CSS 里定义的选择器完全匹配。常见错误是拼错名、多空格、混用中划线和下划线（比如写成 btn_primary 却在 CSS 里写 .btn-primary），浏览器直接跳过这条规则。
实操建议：
- 统一用短横线（kebab-case）：如
header-nav、form-input-error，避免下划线或驼峰 - 一个元素可以有多个 class，用空格分隔：
class="btn btn--large btn--danger"，注意不是逗号 - 不要在 class 名里塞语义化过强的值，比如
class="red-big-text"—— 后期改颜色就得改 HTML，违背「样式与结构分离」原则
CSS 里怎么高效复用 class 样式
高频功能类（如按钮、标题、卡片）适合抽成原子 class，靠组合实现不同效果，而不是为每个场景单独写 class。
比如按钮常用组合：
立即学习“前端免费学习笔记（深入）”；
.btn { display: inline-block; padding: 8px 16px; border: none; border-radius: 4px; }
.btn--primary { background-color: #007bff; color: white; }
.btn--outline { background: transparent; border: 1px solid #007bff; }
.btn--small { padding: 4px 12px; font-size: 14px; }
这样写 HTML 就很灵活：<button class="btn btn--primary btn--small">提交</button>。
注意点：
- 基础 class（如
.btn）必须放在前面，否则后面覆盖不了关键样式（比如display或padding） - 修饰类（
--small、--outline）建议用双横线前缀，和基础名区分开，避免命名冲突 - 别滥用
!important—— 出现它往往说明 class 层级或顺序没理清
为什么有些 class 样式死活不生效
最常被忽略的是 CSS 优先级和作用域问题。即使 class 名对了，也可能被其他规则压住。
排查方向：
- 打开浏览器开发者工具，看目标元素的 computed 样式里，对应属性是否被划掉 —— 划掉说明被更高优先级规则覆盖
- 检查是否在
<style></style>标签或外部 CSS 文件里漏写了.btn这类基础定义 - 确认没有写错选择器类型：比如把
.btn写成#btn（那是 id 选择器） - 留意 CSS 文件加载顺序：后加载的文件里的同名规则会覆盖前面的
要不要用 BEM 或其他命名规范
如果项目只有几页 HTML，直接用 .card、.card-header、.card-body 就够用；但多人协作或长期迭代，BEM（.card__title、.card--featured）能快速定位层级和状态，减少意外覆盖。
简单落地建议：
- 模块名用单下划线分隔主体：
.user-profile - 子元素用双下划线：
.user-profile__avatar - 修饰符用双横线：
.user-profile--compact - 别为了套规范硬拆 —— 如果
.btn-primary已经清晰表达意图，不必强行改成.btn__primary
真正卡住人的，往往不是命名本身，而是 class 没有明确职责边界：一个 class 既管颜色又管尺寸还管动画，后期改起来就互相牵扯。先想清楚「这个 class 只负责什么」，再决定怎么起名。
