应使用 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 custom properties 管理颜色/尺寸等常量
颜色、圆角、断点这些值散落在各处，改主题色要翻十来个文件？用 :root 定义变量，HTML 里靠 class 或 data-* 触发切换，CSS 里用 var(--primary-color) 引用。
例如：
:root { --primary-color: #007bff; --radius-sm: 4px; --breakpoint-md: 768px; } .btn-primary { background-color: var(--primary-color); border-radius: var(--radius-sm); }
- 换深色模式？只需覆盖
:root里的变量，不用重写整套规则 - 避免魔法数字：
border-radius: 4px不如border-radius: var(--radius-sm)可读 - 注意兼容性：IE 不支持，若需兼容得配 postcss 插件降级
用 data- 属性配合 CSS 实现轻量状态控制
不想引入 js 就动态切样式？data- 属性是天然钩子。比如控制按钮禁用态、卡片展开状态，直接写 data-state="disabled" 或 data-expanded="true"，CSS 里用属性选择器匹配：
button[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
- 比写一堆
btn--disabled类名更灵活，状态逻辑全在 HTML 层表达 - 避免 JS 和 CSS 类名强耦合（比如 JS 里硬编码
el.classlist.add("is-active")） - 慎用嵌套过深的
data-：像data-form-step="2" data-validation="passed"会增加维护成本
用 @layer 控制 CSS 优先级，减少 !important
多人协作时样式打架、越加越多 !important？现代 CSS 的 @layer 能按语义分层管理优先级，比如把重置、基础、组件、覆盖分四层：
@layer reset { * { margin: 0; padding: 0; } } @layer base { body { font-family: system-ui; line-height: 1.6; } } @layer components { .card { border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } } @layer utilities { .d-none { display: none; } }- 层内样式按书写顺序覆盖，层间按
@layer声明顺序覆盖（后声明的层优先级更高） - 彻底摆脱靠“多写几遍类名”或滥用
!important来强行提权 - 目前 chrome 103+、firefox 101+、safari 16.4+ 支持，旧浏览器需用构建工具转译
实际项目里最易被忽略的，是把 class 当作临时补丁反复叠加，而不是从结构和语义出发设计原子类或 BEM 块。样式简洁与否，不取决于代码行数，而在于修改时是否清楚“动这里会影响哪些地方”。