html语义结构必须先于css写，否则flex/grid会失效；语义标签是布局前提而非锦上添花，父容器未开启flex上下文或语义骨架缺失将导致flex:1等属性无效，且影响响应式断点控制与可访问性。

HTML语义结构必须先于CSS写，否则Flex/Grid会失效

很多开发者在写完一堆 div 后才去加 display: flex，结果发现 flex: 1 不起作用——根本原因是父容器没开启 Flex 上下文，而更深层的问题是：HTML 没有提前定义好语义骨架。

语义标签不是“锦上添花”，而是布局前提。比如 <main></main> 必须唯一且直接子元素，否则 min-height: 100vh + flex: 1 在它身上就无效；<aside></aside> 不能随便套在任意右侧栏上，否则响应式断点里它可能被错误地压到主内容下方。

• <header></header> 只用于站点级导航，别给每个卡片标题都套一个
• <section></section> 需有独立语义（如“用户评论区”），不是所有带标题的区块都该用
• 避免 <div class="main"> 这类伪语义写法——既破坏可访问性，又让 CSS 选择器不得不写成 <code>.main > .content 这种耦合形式

  CSS模块化协作靠命名约束，不是靠 !important

  多人协作时样式冲突，90% 出在 class 命名随意和选择器过深。BEM 或类似前缀（如 m-card、g-mt-12）不是为了好看，是防止 .product .title 这种强依赖 DOM 结构的选择器一改结构就全崩。

  真实踩坑场景：某人给 <button></button> 加了 !important 覆盖默认样式，结果另一个模块的禁用态逻辑（[disabled]）被绕过，按钮点击后无反馈；还有人把字体大小写死在 body 上，导致后续所有组件字号无法缩放。

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载
  • 公共基础样式（重置、间距、字体）抽到 base.css，用 g- 前缀明确作用域
  • 模块样式只允许一级 class 选择器，禁止 .m-card .title，改用 m-card__title
  • ID 选择器只留给 JS 的 getElementById，绝不写进 CSS——否则复用时直接报错

  Grid 容器必须显式声明区域，别指望 auto-placement 做主布局

  用 grid-template-areas 写模板比纯 grid-auto-flow 更可控。很多人写 grid 时只设 grid-template-columns，结果内容溢出或换行错乱，是因为没约束区域边界。

  典型错误：侧边栏用 grid-column: 1，主内容用 grid-column: 2，但没配 grid-template-areas，导致小屏下 grid-column 被媒体查询覆盖后区域错位；或者用 fr 单位但没设 minmax()，长 URL 直接撑破列宽。

  • grid-template-areas 的字符串值必须是合法 CSS 标识符（不能含空格、斜杠、中文）
  • 固定宽侧边栏推荐 grid-template-columns: 240px 1fr，别用 auto —— 它会随内容伸缩
  • 每个 grid 区域内必须显式设 width: 100%，否则文本可能溢出容器，尤其在 flex 嵌套 grid 时

  HTML组件目录结构要隔离模板与样式，别混在同一个文件夹

  把 header.html、header.css、header.js 全塞进 components/header/ 看似合理，但实际会导致构建时样式无法按需加载、热更新失效、甚至 SSR 渲染时 CSS 提取失败。

  真正稳定的结构是：模板归 templates/（纯 HTML 片段），样式归 styles/components/（按 BEM 组织），脚本归 scripts/modules/（ESM 模块）。这样 Webpack/Vite 才能正确解析 @import 和 import 关系，也方便做 CSS scope 或原子化提取。

  • 共用片段（如 head.html）放 _includes/，而非 components/ —— 它不参与交互，只是插入逻辑
  • 组件样式禁止使用 id 或 body 作为祖先选择器，否则复用时样式污染不可控
  • 图片等资源统一走 assets/，路径写成 ../assets/icons/home.svg，避免相对路径在不同引入层级下失效
  复杂点在于语义结构和 CSS 模块边界的交界处：比如 <main></main> 是 HTML 层级概念，但它的高度行为由 CSS 的 flex: 1 控制；而这个 flex: 1 又依赖于外层 display: flex 是否生效——任何一层漏掉，整个布局链就断了。