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></template> 和 <slot></slot> 是好选择，但注意 Shadow DOM 默认隔离样式——如果想让全局 CSS 影响组件内部，得显式设置 shadowRoot.mode = 'open' 并用 :host 或 ::slotted 控制穿透
• 前端框架里（如 Vue 的 <header></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 个文件

最难的不是“做重复”，而是判断“该不该重复”。比如移动端下拉菜单和桌面端主导航，视觉完全不同，但背后的数据结构、焦点管理、键盘操作逻辑必须一致——这时候重复的是行为契约，不是像素样式。这点常被忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！