全局样式必须写在里，否则不生效；浏览器仅在内解析为有效样式上下文，内的不参与层叠计算，导致body重置、类名匹配、媒体查询全部失效。
全局样式必须写在
浏览器只在 内解析 <style></style> 为有效样式上下文；塞进 的 <style></style> 根本不会参与层叠计算——这不是兼容性问题，是 HTML 规范本身不承认它。常见现象包括：body { margin: 0; } 失效、自定义类名匹配不到、@media 查询被忽略。
实操建议：
- 所有模板初始化 CSS 统一放在
底部，紧挨着<link rel="stylesheet">后面 - 动态插入时用
document.head.appendChild(styleEl)，别 append 到document.body - 多个
<style></style>共存时，顺序即优先级：后写的同选择器规则会覆盖前面的
* { box-sizing: border-box; } 是高危写法
它看似统一盒模型，实则无差别打穿所有元素，包括 Ant Design、Element Plus 等 UI 库内部已精细控制的结构。典型表现：表单控件高度塌陷、卡片 padding 错位、折叠面板展开后内容溢出。
更安全的初始化方式：
- 限定作用域：
.template-root * { box-sizing: border-box; }，只影响你可控的容器 - 分层继承：
html { box-sizing: border-box; }+*, *::before, *::after { box-sizing: inherit; } - 若项目用 rem 布局，务必确认
html { font-size: 16px; }存在，否则body { font-size: 14px; }会导致所有 rem 计算偏移
外部 CSS 文件才是统一维护的唯一可靠路径
<style></style> 块无法长效缓存、不能跨页复用、改一处漏一处，根本不是“维护”而是“埋雷”。真正可维护的方案，是把通用样式（重置、布局、基础组件）抽成 main.css，所有页面通过 <link rel="stylesheet" href="/css/main.css"> 引入。
注意点：
- 禁止在 HTML 中写内联样式（如
<div style="margin: 10px;">），调试时优先级过高，后期几乎无法统一调整<li>路径必须准确：相对路径以构建配置根目录为准，不是相对于当前 HTML 文件</li> <li>特定页面专属样式（如活动页 Banner）可用 <code><style></style>块，但必须加注释说明“仅本页有效”，且上线前评估是否值得单独维护 - Shadow DOM 内部不能用外部 CSS，所有样式必须内联或注入到
this.shadowRoot - 构建时预处理（Vite 的
vite-plugin-html、Webpack 的html-loader）输出的是完整 HTML，零运行时开销，CDN 缓存最稳 - SSI（
<!--#include file="header.html" -->）依赖服务器配置，本地开发无法预览，且无法传参或条件渲染
模板结构本身决定样式作用域边界
用 <template></template> + JS 注入页头页脚时，document.importNode(template.content, true) 必须用，cloneNode(true) 会导致表单状态丢失；Web Components 则必须在 connectedCallback 中操作 DOM，constructor 里操作会报错。
关键约束：
真正难的不是让样式“看起来一样”，而是当第三方组件、rem 基准、Shadow DOM 隔离、构建路径这四者同时存在时，你还得确保它们不互相撕扯。
