不能将非关键样式写入标签，因其拖慢首屏、破坏缓存、增加维护成本；通用样式须抽离为外部css，仅允许带注释的极简专属样式内联；禁止style属性内联样式。
为什么不能把样式写进 <style></style> 标签里
除非是首屏关键 CSS，否则把样式塞进 <style></style> 会直接拖慢首屏加载、破坏缓存复用、放大维护成本。浏览器对内联 <style></style> 块不做独立缓存，每次 HTML 请求都得重传全部样式；多个页面共用按钮样式时，复制粘贴一次，漏改一处就 UI 不一致。
- 所有通用样式必须抽离为外部
main.css，通过<link rel="stylesheet" href="main.css">引入 - 仅允许极简专属样式（如活动页 Banner）用
<style></style>，且必须加注释：<!-- only for /promo/2026-summer --> - 绝对禁止在
style属性里写内联样式，例如<div style="margin: 10px;"> —— 它优先级过高，后期几乎无法用 CSS 覆盖<h3>class 名怎么起才不踩坑</h3> <p>用 <code>btn-red或left-nav这类名，等于把视觉或布局逻辑硬编码进 HTML，换主题色或改版时就得全局搜索替换，还容易误删。- 采用 BEM 规范：块名用语义，如
product-card；元素用双下划线，如product-card__title；修饰符用双短横，如product-card--featured - 避免位置命名（
top-bar）、样式命名（blue-link）、无意义编号（div3） - 团队统一前缀：工具类用
u-（如u-text-center），JS 钩子用js-（如js-modal-trigger），不带样式
HTML 结构如何做到“没 CSS 也能读”
关掉样式后满屏
<div> 堆叠，说明语义缺失——这不是视觉问题，是结构缺陷。搜索引擎、读屏器、后续 SEO 和 a11y 改造都会因此卡住。<ul><li>导航用 <code><nav></nav>，主内容用<main></main>，侧边栏用<aside></aside>，别再套<div class="nav"> <li>标题严格按层级嵌套：<code><h1></h1>全局唯一，模块标题从<h2></h2>开始，不跳级 - 采用 BEM 规范：块名用语义，如
-
<img>必须带alt属性；表单控件必须配for+id；列表内容必须用<ul></ul>或<ol></ol> - 只用
<link rel="stylesheet">，放在顶部 - 避免在 JS 里动态插入
<link>，除非明确需要异步加载非关键样式 - 关键 CSS（如首屏按钮、标题样式）可内联，但必须压缩并控制在 1KB 内，超出就拆出独立文件
外部 CSS 引入方式的性能陷阱
用 @import 在 CSS 里引入其他样式表，会让浏览器串行加载，阻塞渲染，比 <link> 慢 200ms 以上——百万级访问下，这点延迟会放大成大量用户流失。
真正难的不是写对一行 class，而是让每个 <header></header>、每个 product-card__price 都承载可预测的语义和复用意图。一旦 HTML 结构松散、class 命名随意、样式引入混乱，百万流量只会加速暴露这些裂缝。
