组件库顶层容器必须用CSS Grid，因其唯一支持行列控制、区域映射与响应式缩放；禁用flex/float做页面级布局，须在最外层.c-layout上定义grid-template-areas，列宽用fr或minmax()，子区域显式设width:100%，统一用gap而非margin，类名强制前缀，HTML自闭合且可独立运行，按钮用<button>标签，全部尺寸颜色基于CSS变量声明，禁用!important和iframe布局。
组件库必须用 CSS Grid 做顶层容器，别碰 flex 或 float
Grid 是唯一能同时控制行列、区域映射和响应式缩放的布局机制。用 display: flex 做页面级容器，遇到三栏+页脚+侧边折叠时，很快会陷入 flex-wrap 失效、min-width 冲突、order 无法跨行等问题。
-
grid-template-areas要写在最外层.c-layout容器上，不是每个组件内部——组件只管自己结构，不参与全局区域划分 - 列宽必须用
fr或minmax()，禁用auto或固定px：比如grid-template-columns: 240px 1fr minmax(320px, 480px) - 所有子区域（如
.c-layout__main）必须显式设width: 100%，否则在 Safari 中可能不占满父容器宽度 - 用
gap统一控制间距，别用margin—— 后者在 Grid 里容易触发 margin collapse 或错位
HTML 结构必须自闭合且带命名空间前缀
没有框架兜底时，“复制粘贴就能用”是假命题。真实场景中，组件被插入到已有项目里，类名冲突、样式泄漏、语义错乱才是默认状态。
- 所有类名强制加前缀，如
.c-button、.c-card__header，禁用.btn、.card-header这类泛化名 - 每个组件 HTML 必须能单独复制进任意页面运行：不能依赖外部
<section>包裹，也不能靠 JS 注入 class - 按钮必须用
<button>标签，不用<div role="button">—— 后者丢失表单提交、键盘焦点、Enter/Space触发能力 - 禁止使用
px单位：内边距、圆角、阴影全部基于 CSS 变量，如padding: var(--c-space-md)
设计令牌必须集中声明，且禁用 !important
CSS 自定义属性不是“可选优化”，而是组件库可主题化的唯一路径。一旦写死像素值或加 !important，深色模式、品牌定制、高 DPR 屏适配就全卡死。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
:root中统一声明所有设计变量：--c-color-primary、--c-radius-sm、--c-shadow-level-1 - 组件内所有尺寸、颜色、动画时长都引用变量，不直接写值；连
font-size也要用clamp(1rem, 4vw, 1.25rem)这类响应式表达式 -
!important在组件 CSS 中出现一次，等于宣告该组件无法被下游覆盖——主题切换、A/B 测试、灰度发布都会失效 - 深色模式靠
@media (prefers-color-scheme: dark)覆盖变量值，而不是写两套 class
别把 iframe 当布局手段，它破坏 DOM 完整性
有人想用 <iframe> 隔离组件样式，结果发现导航高亮失效、滚动不同步、移动端双层滚动卡顿——这不是兼容问题，是架构误用。
立即学习“前端免费学习笔记（深入）”；
-
<iframe>唯一合理用途是加载第三方跨域内容（支付弹窗、客服 widget），不是组件隔离方案 - 父页无法读取 iframe 内
document.title或scrollTop，做 SPA 导航或返回顶部就断链 - 高度必须手动同步（
postMessage+ JS 计算），否则内容溢出或留白，且 iOS 上常触发渲染抖动 - 真正隔离靠命名空间 + CSS 变量 + 结构自闭合，不是靠 iframe 切割 DOM 树
