直接复用外部css文件最简单可靠，内联和内部样式无法跨页共享、特异性高、难维护且不缓存；应按职责拆分base/components/layout三类css并规范引入顺序。
直接复用外部 CSS 文件是最简单、最可靠的方式，其他方案（如模板引擎注入、Web Components）在小项目里反而增加维护成本。
为什么不用内联或内部样式表
内联样式（style="..."）和内部样式表（<style></style>）天然无法跨页面共享。改一个按钮颜色，就得手动翻 20 个 HTML 文件挨个找 style 属性或 <style></style> 块——这不是封装，是埋雷。
- 内联样式的特异性过高，后续用类名覆盖要加
!important，破坏层叠逻辑 - 内部样式表一旦页面变多，复制粘贴容易漏改、错改，版本差异肉眼难辨
- 两者都无法被浏览器缓存为独立资源，每次加载 HTML 都得重传样式代码
如何组织外部 CSS 文件实现真正复用
关键不在“有没有 external CSS”，而在“怎么拆”和“怎么引”。一个 main.css 堆 5000 行不如按职责分三份：
-
base.css：重置、字体、颜色变量（:root）、通用工具类（如.text-center,.d-flex） -
components.css：按钮、卡片、表单控件等可复用 UI 单元的样式，每个组件独立成块，用 BEM 命名（如.btn,.btn--primary） -
layout.css：栅格、页眉/页脚、响应式断点，不掺杂具体视觉细节
所有 HTML 页面统一引入顺序：<link rel="stylesheet" href="/css/base.css"> → <link rel="stylesheet" href="/css/components.css"> → <link rel="stylesheet" href="/css/layout.css">。顺序不能乱，否则变量未定义或覆盖失效。
多类名组合比写新样式更高效
遇到“大部分一样、个别微调”的场景（比如 8 个按钮都蓝底白字，1 个要红底），别新建一个 .btn-danger 全量写，而是复用基础类 + 扩展类：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<button class="btn btn--blue">提交</button> <button class="btn btn--red">删除</button>
对应的 CSS 就该是：
.btn { padding: 8px 16px; border: none; border-radius: 4px; }
.btn--blue { background-color: #3498db; color: white; }
.btn--red { background-color: #e74c3c; color: white; }
- 避免用 ID 或嵌套选择器（如
#header .nav-link）限制复用范围 - 扩展类名必须带修饰符（
--）或前缀，防止语义混淆 - 如果某类扩展只用一次，说明它还没达到“可复用”标准，先别进公共 CSS
构建阶段自动注入容易被忽略的细节
用 Webpack/Vite 时，html-webpack-plugin 或 vite-plugin-html 能自动把 CSS 插入 ，但默认不会处理哈希和路径前缀。没配好会导致：
- 本地开发正常，上线后
main.css404（路径不对） - 样式更新后用户仍看到旧版（缓存未失效）
必须显式配置：
- Webpack：启用
filename: '[name].[contenthash:8].html'和minify: true - Vite：在
vite.config.ts中设build.rollupOptions.output.entryFileNames并确保publicDir正确 - 所有
<link>的href必须是相对根路径（/css/base.css），而非相对当前 HTML（../css/base.css）
路径写错一字符，整个样式链就断了——这是上线后白屏或无样式的最常见原因，却总被当成“CSS 没生效”去查选择器优先级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
