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 就很灵活：。
注意点：
