应使用 class 替代重复的内联 style，统一管理样式；用 CSS 自定义属性管理常量；通过 data- 属性实现轻量状态控制；借助 @layer 分层控制优先级，提升可维护性与语义化。
用 class 代替重复的 style 属性
直接在标签里写 style="color: #333; font-size: 14px; line-height: 1.5;" 看似快，但改一处就得全局搜改，还容易漏。真正省事的是抽成 class，统一管样式。
比如多个段落都要同样排版，别这样写：
…
…
换成：
…
…
然后在 CSS 里定义一次：
立即学习“前端免费学习笔记（深入）”；
.text-body {
margin: 0 0 1rem;
color: #444;
font-family: -apple-system, sans-serif;
}
- 后续调字体、调间距，只改 CSS 文件，不碰 HTML
- 语义化更强：
text-body比一堆内联样式更容易理解用途 -
浏览器渲染更快：内联样式会阻塞解析，
class复用还能利用 CSS 缓存
用 CSS custom properties 管理颜色/尺寸等常量
颜色、圆角、断点这些值散落在各处，改主题色要翻十来个文件？用 :root 定义变量，HTML 里靠 class 或 data-* 触发切换，CSS 里用 var(--primary-color) 引用。
