CSS中通过语义化class（如btn-primary、card-title）统一控制样式复用，避免内联样式；命名需稳定、可扩展（如btn--large），配合CSS自定义属性管理变量，兼顾一致性与可控变化。
重复不是复制粘贴，而是有意识地复用视觉与结构元素来建立一致性。它不等于偷懒，也不等于单调——做对了，用户会感觉“这网站很稳”；做错了，就是满屏雷同、毫无重点。
怎么用 class 实现 CSS 层面的重复控制
重复在 HTML/CSS 中最直接的落地方式，就是通过 class 统一控制样式。比如导航栏、按钮、卡片标题这些高频出现的模块，必须抽成可复用的类名，而不是每次写 style="color: #333; font-size: 16px;"。
- 命名要语义化且稳定，例如
btn-primary、card-title、section-header，避免用red-text或big-font这类描述性命名，否则换色换尺寸就得改一堆地方 - 不要为单次使用写独立 class，比如某个页脚只出现一次，但结构和配色跟其他页脚一致，那就复用已有的
footer-base，加一个修饰类如footer-base--compact - 慎用
!important：一旦某个重复 class 被强制覆盖，后续所有复用它的位置都会意外失联，排查成本陡增
HTML 模板复用时容易踩的坑
很多人以为把 header.html 和 footer.html 单独存着就算完成重复设计，其实关键在“怎么引入”以及“引入后是否可控”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 纯静态 include（如 Apache SSI 或 Jekyll 的
{% include %}）没问题，但若用 JS 动态插入（如fetch()+innerHTML），就可能破坏 SEO、延迟首屏、丢失 CSS 作用域 - Web Components 中的
<template>和<slot>是好选择，但注意 Shadow DOM 默认隔离样式——如果想让全局 CSS 影响组件内部，得显式设置shadowRoot.mode = 'open'并用:host或::slotted控制穿透 - 前端框架里（如 Vue 的
<Header>、React 的Header组件），别把 props 设计成“全量配置对象”，比如headerProps={{ title: 'xxx', logoUrl: 'yyy', showSearch: true }}—— 这会让重复变成“看起来一样、实则每个都不同”，失去复用意义
重复 ≠ 相同：如何在统一中保留变化
真正的重复设计，允许差异，但差异必须受控。比如一组按钮都叫 btn，但可以有 btn--large、btn--outline、btn--danger，这些变体仍共享 padding、border-radius、transition 等基础规则。
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 自定义属性（
--btn-padding、--btn-bg）集中管理可变参数，比写死像素值或颜色码更利于批量调整 - 字体层级推荐用
h1–h6语义标签 + 统一 class（如heading-1），而不是全用div+font-size，否则屏幕阅读器无法识别结构，也破坏了重复背后的可访问性逻辑 - 图标重复最危险：别在每个页面都写一遍
<svg>...</svg>，应封装为<Icon name="search"></Icon>或使用 icon font / SVG sprite，否则一处修改要搜 20 个文件
最难的不是“做重复”，而是判断“该不该重复”。比如移动端下拉菜单和桌面端主导航，视觉完全不同，但背后的数据结构、焦点管理、键盘操作逻辑必须一致——这时候重复的是行为契约，不是像素样式。这点常被忽略。
