用语义化类名（如.layout-sidebar-main）替代内联样式或数值类名，可实现布局意图封装、批量控制、局部覆盖与响应式隔离；通过前缀区分多区域、grid-area声明位置、容器级断点，避免CSS污染与维护灾难。
用类名控制双栏结构比内联样式更可靠
直接写 style="grid-template-columns: 30% 70%" 看似快，但一改全崩——所有双栏容器都得手动搜替换。用类名封装布局意图（比如 .layout-sidebar-main）才能批量控制、局部覆盖、按需切换。
关键不是“加个 class”，而是让类名表达语义和约束：
-
.layout-sidebar-main表示「左侧窄栏 + 右侧主内容」，不指定具体宽度百分比，只约定比例关系 -
.layout-sidebar-main--compact是它的变体，用于小屏或嵌套场景，内部用grid-template-columns: 1fr 2fr替代百分比，防缩放错位 - 避免
.col-30这类纯数值类名——它把实现细节暴露给 HTML，后续想改成 flex 或 columns 就得改模板
多个双栏区域共存时，类名必须隔离作用域
一个页面可能同时存在简历侧边栏、翻译对照栏、编辑器预览栏。如果都用 .sidebar + .main，CSS 就会互相污染。解决办法是前缀隔离：
- 简历区用
.resume-sidebar/.resume-content - 翻译区用
.trans-source/.trans-target，不叫left/right——因为竖排时它们是上下关系 - 编辑器区用
.md-editor/.md-preview，靠display: grid和grid-area显式声明位置，不依赖左右顺序
这样即使某处加了 width: 100%，也不会意外撑爆翻译区的 .trans-target。
响应式断点要绑定到容器类，而不是全局媒体查询
写 @media (max-width: 768px) { .sidebar { display: none; } } 看似省事，但一旦某个双栏区域需要在 640px 切单栏、另一个坚持到 960px 才切，就全乱了。正确做法是：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 每个双栏容器自带响应式类，如
.layout-sidebar-main--sm（.layout-sidebar-main--md（ - CSS 中用
.layout-sidebar-main--sm .sidebar覆盖，不污染其他容器 - JavaScript 动态切换类名时，只操作当前容器：
container.classList.toggle('layout-sidebar-main--sm', window.innerWidth
这比依赖浏览器自动触发 resize 更稳——尤其在双屏设备上，visualViewport.width 变化时，resize 事件可能延迟或丢失。
类名要预留扩展钩子，别锁死布局机制
今天用 Grid，明天可能要支持 IE11（Flexbox），后天要适配双屏折叠态（需 JS 动态重排）。类名设计得留缝：
- 主类名
.layout-sidebar-main不暴露底层技术，只表达结构意图 - 底层实现用子类控制：
.layout-sidebar-main--grid、.layout-sidebar-main--flex、.layout-sidebar-main--js - 当检测到双屏半开状态时，JS 可以移除
--grid，加上--js，再调用 layout 函数重排，HTML 结构完全不动
真正难的不是写对一次双栏，而是让同一套类名体系扛住三年迭代、五种设备、三种兼容性策略——类名就是你留给未来自己的接口文档。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
