结构与表现必须物理隔离，即html中禁用style标签和内联style属性，强制通过引入外部css文件，以保障缓存、渲染性能、调试效率、构建优化及长期可维护性。
结构与表现必须物理隔离，哪怕只写一个页面——否则所谓“极简”只是表象，实际是债务堆叠的起点。
为什么 style 标签和内联 style 属性不能出现在生产 HTML 中
它们不是语法错误，但会立刻破坏缓存、阻塞渲染、污染 DevTools 调试路径，并让多人协作变成字符串搜索大战。
- 浏览器对
<style></style>内容不复用：每个页面都得重新下载、解析、注入，哪怕样式完全相同 -
element.style.color返回空字符串？因为计算值不在style属性里，而是在 computed styles 里——你根本没法批量读写 - Chrome DevTools 的 Styles 面板出现两套
.card：一套来自<style></style>，一套来自components.css，优先级打架时你永远猜不到哪条生效 - 构建工具（如 Vite）无法提取、压缩、按需分割内联样式；
css-minimizer-webpack-plugin对它完全失效
极简页面也必须走 <link rel="stylesheet"> 流程
哪怕只有三行 CSS，也要抽成 base.css，通过 <link> 引入。这不是仪式感，是保证未来可扩展性的最小成本。
-
<link>必须放在内，且不能带type="text/css"（HTML5 已废弃，加了反而可能被忽略） - 拼写错误如
<line></line>或路径错写成./css/base.css（少个styles/）会导致样式完全不加载，且无任何报错 - 首屏关键样式允许极少量内嵌，但必须显式声明
media="screen and (min-width: 0px)"，否则仍会阻塞渲染 - 所有字体、颜色变量、间距系统，统一定义在
variables.css，其他文件用var(--space-md)引用，改一处全链路生效
HTML 里连 class 名都要克制，更别说 style
类名不是“写得越多越灵活”，而是“能少一个就少一个”。每多一个 class，就多一层耦合、一个维护点、一次命名决策负担。
- 避免功能型 class 如
u-mt-20或语义模糊的section-1；优先用语义化 class：<header class="site-header"></header>，而非<div class="block-2"> <li>不要为单次使用写 class：如果某个 <code><p></p>真只需要缩进 1em，用text-indent: 1em在 CSS 里统一定制，而不是给它加class="first-paragraph" - 禁止在 Vue/React 模板中写
style="margin-left: 20px"；改用原子类或styled.p封装，确保样式来源唯一 - SVG 中动态尺寸（如
<circle cx="<%= x %>"></circle>）是唯一可接受的内联场景，但x、y、r必须经数字校验，不可拼接用户输入
真正难的不是写 CSS，而是忍住不把样式塞进 HTML —— 这种克制，会在第 3 个迭代、第 7 个换肤需求、第 12 个协作开发者加入时，突然显出全部价值。
