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"> 必须放在
外部 CSS 文件加载延迟会导致 FOUC（Flash of Unstyled Content）：页面先按浏览器默认样式闪一下，再突然跳变成设计稿样式。这不是 bug，是加载顺序没卡准。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
<link>标签必须在内，且尽量靠前；放在底部等于放弃样式控制权 - 绝对不要用
@import在 CSS 文件里再引入其他 CSS——它会阻塞后续规则解析，且不支持媒体查询条件提前判断 - 如果模板由服务端渲染（SSR），确保 CSS 文件路径是相对根目录的（如
href="/css/main.css"），否则子路径下容易 404
内联样式 style="" 只在三种场景下合理
模板里写 style="width: 200px;" 是反模式，但确实有不可替代的边界情况：
- 服务端动态计算出的尺寸（如图表容器高度依赖数据条数，且无法用 CSS 变量表达）
- 邮件模板兼容性要求：多数邮箱客户端只认内联样式，
<style></style>和外部 CSS 全被过滤 - 微前端子应用隔离：防止主应用 CSS 泄漏到子模块，用内联样式兜底关键布局
- 除此之外，任何「为了快速调试」而加的
style都该在上线前删掉——它绕过选择器优先级，无法被 :hover/:focus 等伪类扩展，也不支持媒体查询
最容易被忽略的一点：HTML 模板结构是否“利于 CSS 控制”，比写多少 CSS 更关键。比如用 <div class="row"><div class="col"> 做栅格，不如直接用 <code>display: grid + 语义化子元素——后者不需要额外 class，响应式断点也更干净。模板和 CSS 的关系，本质是结构设计与表现约束之间的持续协商。
