直接删掉仅为加margin或padding而写的div是最有效起点，因其减少DOM节点、避免样式干扰与JS查询断裂，用语义标签（如nav）替代包裹层并直接设display:flex/grid，结合BEM独立类名与Fragment扁平化，可实现高复用。
直接删掉那些只为加 margin 或 padding 而写的 div，是提升 HTML 复用性和可维护性的最有效起点。
为什么包裹层会破坏复用性
每多一层 div，就多一个 DOM 节点、多一次样式作用域干扰、多一处 JS 查询路径断裂。当你想把一段导航结构抽成组件复用时，如果它被三层 div 包着，那这个“组件”实际包含的不是语义内容，而是一堆布局胶水——别人复用时要么连胶水一起搬，要么重写结构，根本谈不上高复用。
常见错误现象包括：
- 复制粘贴一段
<div class="wrapper"><div class="inner"><nav>...</nav></div></div>到多个页面，改样式时要同步 5 处class="inner" - 用
document.querySelector('.wrapper .inner nav')绑定事件，结果某页漏写了inner，JS 报错Cannot read property 'addEventListener' of null - 在 React 中返回
<div><div><header></header></div></div>，导致 Fragment 无法扁平化，React DevTools 里看到冗余节点
用语义标签 + CSS 布局替代包裹层
浏览器原生支持 header、nav、main、section 等标签直接设置 display: flex 或 display: grid，无需中间容器。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 把
<div class="nav-container"><nav>...</nav></div>直接改成<nav>...</nav>，然后在 CSS 中写nav { display: flex; gap: 1rem; padding: 0.5rem; } - 避免为单个链接加
div：不用<div class="link-item"><a href="#">首页</a></div>，改用<nav><a href="#" class="nav__link">首页</a></nav>，样式通过.nav__link控制 - Flex/Grid 容器必须设在语义标签上，而不是它的父
div；否则语义和布局职责分离，复用时结构与样式脱钩
Web Components 中避免 shadowRoot 内部嵌套胶水
自定义元素内部若再套一堆 div，等于把问题从页面迁移到组件内部，复用性没提升，反而更难调试。
关键点：
- 注册组件时，
this.attachShadow({ mode: 'open' })后直接 appendtemplate.content.cloneNode(true)，模板里不要包<div class="component-wrapper">...</div> -
<slot></slot>应直接放在语义标签下，例如：<header><slot name="title"></slot></header>，而非<div><header>...</header></div></li> <li>Shadow DOM 内部样式优先用 <code>:host
和::slotted控制，避免靠嵌套层级选择器（如div div header）来覆盖默认行为
BEM 命名下如何避免隐式嵌套依赖
当 class 名出现 menu__item__text 或 card__content__title，说明你正用 CSS 选择器模拟 DOM 嵌套，这会让复用变得脆弱——只要别人改了结构层级，样式就失效。
正确做法：
- 每个 BEM 元素独立可存在：
menu__item、menu__item-text、menu__item-icon是同级关系，不依赖父容器是否含menu__item - 修饰符只作用于当前块或元素：
menu__item--active可直接加在任意menu__item上，不需检查它是否在menu内部 - 拒绝“嵌套类名”写法：
card card__body card__body--large是错的；应为card__body card__body--large，card和card__body是两个独立块
真正高复用的 HTML，不是靠多写一层 div 来“兜底”，而是靠语义明确、样式解耦、结构扁平。一旦开始用 nav 替代 div.nav，用 slot 替代 div.slot-wrapper，你就已经在剥离复用障碍了——但最容易被忽略的是：BEM 类名里的双下划线，不是语法糖，是结构契约。写错一个 __，就可能让别人复用时多写三行修复 CSS。
