.main > .content这种高耦合方式。
CSS模块化协作依赖命名约束，而非!important
多人协作编写样式时，冲突通常源于class命名随意和选择器层级过深。BEM命名规则（如m-card、g-mt-12）并非仅为美观，而是为了避免.product .title这类强依赖DOM结构的写法——一旦结构变化，样式便全面失效。
一个真实案例：某开发者为了覆盖按钮默认样式，在中添加!important，结果另一个模块的禁用态逻辑（[disabled]）被绕过，按钮点击后无反馈。另有开发者将字体大小固定于body，导致后续所有组件字号无法缩放，修改困难。
- 公共基础样式（重置、间距、字体）应独立抽取至
base.css文件，使用g-前缀明确作用域。 - 模块样式仅允许使用一级class选择器，禁止
.m-card .title这类层级写法，改为m-card__title更清晰。 - ID选择器仅保留给JavaScript的
getElementById使用，不得写入CSS文件，否则复用时报错。
Grid容器必须显式声明区域，勿依赖auto-placement做主布局
使用grid-template-areas定义模板布局比依赖grid-auto-flow更具可控性。许多开发者仅设置grid-template-columns，导致内容溢出或换行错乱，根本原因在于未约束区域边界。
常见错误案例：侧边栏使用grid-column: 1，主内容使用grid-column: 2，但未配合grid-template-areas锁定关系。屏幕变小时，媒体查询覆盖导致区域错乱。或者使用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模块边界的交界处。例如，的层级概念决定了其高度行为由CSS的flex: 1控制，而flex: 1又依赖外层display: flex是否生效。任何环节出现问题，布局链便会中断。
