嵌套在等容器中会导致seo降权和屏幕阅读器误判，因必须全局唯一且直接位于下；box-sizing: border-box应全局设置以避免布局误差；class名需语义化而非位置化；外部css文件利于缓存复用，内联样式破坏可维护性。
为什么嵌套在里会导致SEO和可访问性问题
因为 <main></main> 在 HTML5 规范中必须是文档级唯一、不可嵌套的语义容器，它代表用户真正要读的核心内容。一旦被包进 <section></section>，屏幕阅读器会把它当作“某个章节里的次要内容”，搜索引擎也会降权处理——相当于告诉爬虫：“这页重点不在这儿”。
-
<main></main>只能直接出现在下，不能作为<header></header>、<footer></footer>、<section></section>或其他块级容器的子元素 - 常见错误：用
<section class="content-area"><main>...</main></section>包裹正文，结果<main></main>的语义被稀释，辅助技术跳过或误判 - 正确做法：删掉那层
<section></section>，让<main></main>顶格写；若需视觉分组，用<div class="wrapper"> 或 CSS Grid 容器替代<h3>box-sizing: border-box 是不是必须全局设置</h3> <p>是，但不是为了“好看”，而是为了消除宽度计算歧义。默认的 <code>content-box让 padding 和 border 额外撑开元素尺寸，导致你设了width: 33.33%的三列，实际总宽可能超 100%——尤其在响应式布局里，这种误差会连锁触发换行或溢出。- 推荐写法：
* { box-sizing: border-box; }，放在所有 CSS 最前面（或重置样式表顶部） - 例外场景：某些第三方 UI 组件库（如旧版 Bootstrap 3）内部依赖
content-box，此时需局部重置，例如.third-party-widget * { box-sizing: content-box; } - 注意：伪元素
::before/::after默认也继承该设置，无需额外声明
class 名里写 “left-sidebar” 这类位置名会带来什么实际麻烦
当设计改版要求侧边栏从左移到右，或者变成底部折叠面板时，“left-sidebar” 就成了语义谎言——你不敢改名，因为怕 JS 或 CSS 里有硬编码引用；也不敢删，因为不确定哪段逻辑还依赖它。结果就是代码里堆着一堆失效却不敢动的 class。
- 命名应表达“它是什么”，而不是“它在哪”或“它长什么样”：用
sidebar-navigation替代left-sidebar，用featured-product-card替代red-button - BEM 修饰符（
--）适合状态变化：product-card--on-sale比product-card-sale-red更安全 - 工具类前缀统一管理：
u-text-center、u-mt-2等，确保团队一眼识别这是纯样式钩子，不承载业务语义
把样式写进
差在缓存策略和复用能力。浏览器对内联
<style></style>块不做长效缓存，每次加载页面都得重新下载整份 HTML；而外部 CSS 文件一旦命中缓存，后续所有页面都能复用——哪怕只改一行颜色，也得等整个 HTML 重新传输。- 仅允许两种例外：
<style></style>用于首屏关键 CSS（如critical.css内联），或某活动页极简专属样式（必须加注释：/* Only for /promo/2026-summer — do not copy */） - 禁止在 HTML 元素上写
style="margin: 10px;"：这类内联样式优先级过高，后期用 CSS 选择器几乎无法覆盖，调试时得靠!important恶性循环 - 真实代价：某电商首页曾因把 12KB 导航样式写进
<style></style>，导致移动端首屏加载多耗 300ms（实测 Lighthouse 数据）
结构和样式物理分离不是教条，是为避免改一个按钮颜色，却得 grep 全项目 HTML 找所有
style属性——那种时刻，你就知道当初没抽离 CSS 是不是真省了时间。 - 推荐写法：
