HTML结构语义化是样式隔离的第一道防线，需用<header><main><section>等标签替代div，避免class命名冲突与选择器特异性失控，并禁用内联style和无锚点嵌入式HTML片段。
HTML结构语义化是样式隔离的第一道防线
样式覆盖经常不是CSS写错了，而是HTML结构没立住——比如用一堆<div>包裹内容，却没用<header>、<main>、<section>等语义标签。浏览器和辅助技术不认class="header"，但认<header>；CSS选择器也更容易基于语义标签做精准限定。
常见错误现象：
- 多个
<div class="card">在不同模块里撞名，结果.card { margin: 1rem }全局生效 -
<div>嵌套过深（DOM层级>4），导致CSS选择器不得不写成.wrapper .container .card .content p来命中，特异性失控 -
<main>被重复使用（HTML规范只允许一个），或放在<section>内部，破坏语义层级
实操建议：
- 每个页面有且仅有一个
<main>，它应直接作为<body>子元素 - 用
<article>包裹独立内容单元（如博客正文、商品卡片），不用<div class="article"> - 避免“语义降级”：不要因为“怕样式冲突”就退回到全用
<div>，而应配合BEM或CSS Modules来管样式
避免内联style和<style>标签污染全局作用域
把CSS塞进<style>标签或属性里，等于主动放弃缓存、复用和构建时优化能力，更关键的是——它绕过了所有现代隔离机制（CSS Modules、scoped、Shadow DOM）的管控范围。
立即学习“前端免费学习笔记（深入）”；
典型问题：
- SPA首屏内嵌
<style>.btn { color: #007bff }</style>，后续加载的Button.module.css里同名类被浏览器视为“同权重后声明”，直接覆盖 -
<div style="margin-top: 20px">在Vue组件中反复出现，导致JS逻辑里大量el.style.marginTop = value + 'px'，既难调试又易XSS - 服务端渲染时动态拼接
style字符串，未校验输入，userInput = 'red; background: url(javascript:alert(1))'直接触发漏洞
实操建议：
- 仅允许在HTML模板中内嵌极少量关键CSS（如字体加载、骨架屏），且必须带
media="print"或media="screen and (min-width: 0px)"显式声明 - 禁用
属性，改用预设工具类（如class="u-mt-5"）或CSS自定义属性（style="--mt: 1.25rem"） - Webpack/Vite构建配置中启用
css-minimizer-webpack-plugin或postcss-purgecss，确保生产环境零内联CSS残留
嵌入式HTML片段必须自带隔离锚点
通过innerHTML或document.write()注入含<style>的HTML字符串，<style>会逃逸到全局，这是最隐蔽的样式污染源——它不报错、不警告，只在某个按钮突然变大时才暴露。
真实场景：
- 微前端子应用返回
<div><style>.modal { z-index: 9999 }</style><div class="modal">...</div></div>，结果压垮主应用的弹窗 - 第三方SDK插入广告位HTML，其中
ul li { list-style: none }重置了整个页面的列表样式 - 邮件模板中嵌入
<style>，被Gmail等客户端解析后污染收件人页面
实操建议：
- 禁止直接
el.innerHTML = htmlString，改用DOMParser提取<style>内容，再通过shadowRoot.adoptedStyleSheets注入（需先attachShadow({ mode: 'closed' })） - 若无法用Shadow DOM，至少为注入内容加唯一
data-属性前缀，如<div data-widget-id="chat-20260630">，CSS全部写成[data-widget-id="chat-20260630"] .btn { ... } - 对相对路径资源（如
url(./icon.png)）做运行时重写，否则adoptedStyleSheets会404
CSS加载顺序与优先级陷阱
很多人以为“后引入的CSS一定赢”，但实际规则是：**同权重下后声明胜出；不同权重时，高权重压制低权重，无论顺序**。这就导致很多“明明放最后却没生效”的困惑。
容易踩的坑：
- 把
reset.css放在app.css之后，结果h1 { margin: 0 }被app.css里的h1 { margin: 1em }覆盖，重置失效 - 组件库用
#app .button（ID选择器），你用.my-button覆盖，权重不够，怎么调顺序都没用 - 用
@import引入主题色变量，但它阻塞后续CSS解析，且优先级只取决于@import在文件中的位置，不是物理文件顺序
实操建议：
-
<link>顺序严格按：重置 → 组件库 → 全局变量/工具类 → 页面样式 - 用Chrome DevTools的
Computed面板看哪条规则生效，点击右侧“Show all”查看完整匹配链，别猜 - 避免
@import，改用构建工具合并或<link>并行加载；必须用时，确保@import语句在CSS文件顶部
