应使用 html5 语义化标签替代无意义的 div 堆砌，如用 header、nav、main、aside 替代 class="wrap" 等；统一采用 kebab-case 命名与作用域前缀；通过 template/注释标记区块；配置 editorconfig + prettier 强制格式规范。
用 HTML5 语义化标签替代无意义的 <div> 堆砌<p>后台管理系统最常见问题是 DOM 层级混乱，比如全页面塞满 <code><div class="wrap"><code><div class="content-box"><code><div class="inner">……这种写法既难维护，又让屏幕阅读器和搜索引擎无法理解结构。语义化标签不是“锦上添花”，而是解决结构失焦的第一步。<p>实际替换建议：</p>
<ul><li>
<code><header></header> 固定用于顶部导航栏 + logo + 用户操作区，不建议套 <div> 再加 class 模拟<li>
<code><nav></nav> 专指主导航菜单（左侧或顶部），不要把搜索框、筛选栏也塞进去
<main></main> 必须包裹全部业务内容区域，且整个页面只出现一次<aside></aside> 仅用于与主内容弱关联的辅助模块（如操作日志、快捷入口），不是所有侧边栏都叫 <aside></aside>
<section></section> 滥用：它需要有明确主题和标题（<h2></h2> 级别），纯样式分隔不用它统一 id 和 class 命名规则，禁止中英文混搭或拼音缩写
团队协作中，class="leftMenu" 和 class="menu-left" 同时存在，会导致 CSS 冲突、JS 查询失效、新人看不懂。命名不是风格问题，是接口契约。
可立即执行的约束：
- 全部使用 kebab-case（短横线分隔），如
user-list-table、form-item-required，禁用userListTable或user_list_table - 前缀明确作用域：
layout-（全局布局）、widget-（独立组件）、form-（表单控件）、table-（表格相关） - 禁止出现
box、div、wrap这类无信息量词；用layout-header，不用header-wrap - 状态类统一加
is-或has-前缀，如is-collapsed、has-error，不写active或error单独存在
强制使用 <template></template> 或注释标记区块边界，避免“看不见”的嵌套断裂
后台页面常含动态插入区域（如权限控制的按钮组、异步加载的统计卡片），手写 HTML 容易漏闭合、错层级。光靠格式化工具救不了逻辑断裂。
实操方案：
- 所有可复用区块（如操作栏、数据卡片）用
<template id="tpl-action-bar"></template>包裹，JS 中克隆使用，HTML 主体里不写重复结构 - 对非模板但需视觉分组的区域，用 HTML 注释标定范围：
<!-- START: user-info-card -->…<!-- END: user-info-card --> - 禁止在
<table> 内部直接写 <code><div> 做样式 hack；要用就改用 <code><div role="table"> + ARIA 属性，否则语义和可访问性双崩<li>VS Code 中启用 <code>editor.guides.bracketPairs，让括号匹配高亮可见，比肉眼数
