结构层解耦要求HTML在无CSS/JS时仍能清晰表达内容层级、导航意图和主次关系，需用语义标签（如<header><main><aside>）而非div模拟，禁用内联样式与表现性class，遵循BEM与工具类规范。
结构层解耦不是加几个语义标签就完事，而是让 HTML 文件在不加载任何 CSS 或 JS 的情况下，仍能表达清晰的内容层级、导航意图和主次关系。做不到这点，所谓“分离”只是文件物理拆开，逻辑上依然紧耦合。
如何验证 HTML 是否真正脱离样式可读
关掉浏览器的 CSS 渲染（DevTools → ⚙️ Settings → Preferences → uncheck “Disable styles”），观察页面是否还能分辨出：哪里是主导航、哪段是正文、标题是否有层级、列表是否成组、表单是否完整。如果只剩一堆扁平段落或乱序 div，说明语义缺失，后续加 a11y、SEO 或响应式都会反复返工。
-
<header>必须包裹 logo + 主导航，不能只包一个<h1>；内部嵌套<nav>才算语义闭环 -
<main>全页唯一，且不能出现在<article>或<section>内部——它代表用户打开页面的首要目的，不是内容容器 -
<aside>不是侧边栏占位符，而是与当前<article>主题相关但可独立移除的补充信息（如术语解释、作者背景） - 所有列表必须用
<ul>或<ol>，禁用<div class="list">+ CSS 模拟，否则屏幕阅读器无法识别列表结构
为什么 <style> 标签和内联 style 属性必须限制使用
它们不是语法错误，但会直接破坏缓存策略和团队协作流。一个 <style> 块写在 HTML 里，意味着每次页面请求都得重新下载这段 CSS；而内联 style="margin: 10px" 会让 JavaScript 无法通过 class 切换控制样式，调试时 DevTools 的 Styles 面板会出现两套同名规则，优先级混乱。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 仅允许在 SSR 输出的首屏关键 CSS 中内嵌，且必须带
media="screen and (min-width: 0px)"属性，避免阻塞打印样式加载 - 禁止在 Vue/React 组件模板中出现
style="..."，改用原子类如u-mt-4或 CSS-in-JS 的styled.div - 服务端动态生成的 SVG 元素（如
<circle cx="...">）若需传入坐标，必须校验输入为数字，且不拼接用户输入到 style 字符串中
class 命名如何避免样式与行为语义混杂
命名不是为了编译通过，而是让人看到 js-dropdown-trigger 就知道这个 class 只供 JS 绑定事件，绝不会带任何视觉样式；看到 product-card__price 就明白它是结构的一部分，可被主题色或字体系统继承。
立即学习“前端免费学习笔记（深入）”；
- 禁用表现性名称：
red-button、left-sidebar、big-title—— 换主题或改布局就得全局重命名 - 采用 BEM 规范：
search-form（块）、search-form__input（元素）、search-form--compact（修饰符） - 工具类统一前缀：
u-text-center、u-hidden@md；JS 钩子统一前缀：js-modal-open、js-tab-switch - 所有 class 必须在 CSS 文件中显式声明，禁止只在 HTML 中写 class 却没对应样式（这等于把样式逻辑藏进 HTML）
真正难的不是写出符合规范的 HTML，而是在需求压着改版、时间卡着上线时，依然坚持用 <nav> 而不是 <div class="nav">，坚持把按钮颜色抽成 CSS 变量而不是写死在 style 属性里——这些决定不会立刻见效，但半年后你会少修 70% 的样式兼容问题和无障碍缺陷。
