CSS是唯一能安全、可维护地控制HTML模板视觉表现的机制；HTML仅提供语义化结构，CSS通过class/id等钩子实现可复用、可适配、可主题化的工程价值。
CSS 不是 HTML 模板的附属品，而是唯一能安全、可维护地控制其视觉表现的机制。 没有 CSS 的 HTML 模板只是带语义的纯文本容器；加了 CSS，它才具备可复用、可适配、可主题化的工程价值。
HTML 模板里 class 和 id 是为 CSS 准备的“钩子”
模板中写 class="card" 或 id="main-nav" 不是为了让 JS 拿去操作（虽然也能），首要目的是给 CSS 提供稳定的选择器入口。浏览器默认样式不可靠、不可控，真正统一视觉必须靠你写的 CSS 规则匹配这些属性。
- 类名应语义化（如
btn-primary）而非描述样式（如red-text），否则换主题时要全局改 class - ID 在单页中必须唯一，且特异性过高，
#header一旦被多个组件复用，CSS 就会冲突或失效 - 避免用标签名直接写样式（如
p { line-height: 1.6; }），除非是重置或基础排版规则——模板里可能嵌套任意深度的p，容易误伤
<link rel="stylesheet"> 必须放在 <head> 里，且不能晚于 DOM 构建
外部 CSS 文件加载延迟会导致 FOUC（Flash of Unstyled Content）：页面先按浏览器默认样式闪一下，再突然跳变成设计稿样式。这不是 bug，是加载顺序没卡准。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<link>标签必须在<head>内，且尽量靠前；放在<body>底部等于放弃样式控制权 - 绝对不要用
@import在 CSS 文件里再引入其他 CSS——它会阻塞后续规则解析，且不支持媒体查询条件提前判断 - 如果模板由服务端渲染（SSR），确保 CSS 文件路径是相对根目录的（如
href="/css/main.css"），否则子路径下容易 404
内联样式
模板里写 style="width: 200px;" 是反模式，但确实有不可替代的边界情况：
立即学习“前端免费学习笔记（深入）”；
- 服务端动态计算出的尺寸（如图表容器高度依赖数据条数，且无法用 CSS 变量表达）
- 邮件模板兼容性要求：多数邮箱客户端只认内联样式，
<style>和外部 CSS 全被过滤 - 微前端子应用隔离：防止主应用 CSS 泄漏到子模块，用内联样式兜底关键布局
- 除此之外，任何「为了快速调试」而加的
style都该在上线前删掉——它绕过选择器优先级，无法被 :hover/:focus 等伪类扩展，也不支持媒体查询
最容易被忽略的一点：HTML 模板结构是否“利于 CSS 控制”，比写多少 CSS 更关键。比如用 <div class="row"><div class="col"> 做栅格，不如直接用 display: grid + 语义化子元素——后者不需要额外 class，响应式断点也更干净。模板和 CSS 的关系，本质是结构设计与表现约束之间的持续协商。
