html与css分离是影响可维护性、协作效率和迭代成本的底层结构，需通过语义化标签、bem命名、模块化css及杜绝内联样式来落实。
HTML 与 CSS 分离不是“做了就行”的形式主义，而是直接影响样式可维护性、团队协作效率和长期迭代成本的底层结构。一旦分离失当，比如类名随意、模块边界模糊、语义缺失，后续改一个按钮颜色都可能牵出三处隐藏 bug。
class 命名必须语义化且可复用
很多人以为 class 只是给 CSS 找元素用的，其实它更是 HTML 和 CSS 之间的契约接口。命名如 left-box、red-text 属于表现型命名，一旦设计改成右对齐或灰色字体，这个 class 就名不副实，要么重命名（牵扯所有引用），要么留着误导人。
推荐做法：
- 用 BEM 规范：如
button__icon、card__header--large，明确块（Block）、元素（Element）、修饰符（Modifier）关系 - 避免纯位置/颜色/尺寸词，改用功能或内容角色，例如
search-input而非top-input - 所有 class 名统一用 kebab-case（短横线分隔），不使用下划线或驼峰，避免和 JS 变量命名混淆
- 不为单次使用写专属 class，宁可用已有模块组合，比如
btn btn--primary而非homepage-cta-btn
HTML 标签必须严格语义化，不靠 class 撑结构
分离架构下，HTML 的语义不是加分项，而是 CSS 能否合理组织的前提。如果全靠 div 堆出页面，CSS 就只能靠 class 层层嵌套来模拟层级，最终出现 .header .nav .menu .item .link 这种高特异性选择器——改一处样式，得同步检查所有依赖它的 class 是否还成立。
实际约束点：
- 页头用
header，导航用nav，主内容用main，文章区块用article，不要留div class="main-wrapper" - 列表必须用
ul/ol，哪怕只是横向排列；表格数据必须用table，别用div模拟格子 -
time、address、figure等小众但语义精准的标签，该用就用，它们自带默认样式隔离和辅助设备识别能力 - 禁止为了“方便写 CSS”而降级语义，比如把
h2改成div class="h2-style"—— 这等于主动放弃 SEO 和屏幕阅读器支持
CSS 模块划分要按功能边界，而非视觉位置
很多人拆 CSS 是按“首页.css”“列表页.css”这种页面维度，结果导致按钮样式散落在 5 个文件里，修改圆角时得开 5 个标签页。真正的模块化应围绕可复用单元展开，让每个 CSS 文件只负责一类行为或外观逻辑。
典型模块组织方式：
-
components/button.css：所有按钮变体（primary、ghost、icon-only）及状态（hover、disabled） -
layout/grid.css：仅定义栅格系统，不含任何业务组件样式 -
utilities/spacing.css：只含mt-4、px-6这类原子级间距工具类 -
themes/dark.css：只覆盖变量（--color-bg），不重复写选择器
关键提醒：HTML 中引入这些模块时，用 <link rel="stylesheet" href="components/button.css"> 显式声明依赖，别指望构建工具自动合并后就忽略模块边界 —— 开发阶段保持分离，才看得清样式污染源头。
HTML 文件里禁止任何形式的样式残留
即使只有一行 style="margin-top: 1rem"，也足以破坏整个分离架构的信任基础。这类代码不会报错，但会让团队成员误判“这里可以临时加样式”，进而引发雪球效应。
必须堵死的入口：
- 绝对不用
style属性 —— 它权重高、不可继承、无法用媒体查询覆盖 - HTML 文件内禁用
<style></style>标签，哪怕只写一行.hidden { display: none }—— 这类通用规则应归入utilities模块 - 构建流程中加入校验：用 HTMLHint 配置
"attr-prohibited": ["style"]，CI 阶段失败即阻断提交 - 编辑器配置自动修复：VS Code 的 Auto Rename Tag 插件 + Prettier，可防止手误漏掉引号或写错闭合标签，间接减少因结构错误导致的“不得不加 style 补救”场景
最易被忽略的一点：第三方组件库注入的内联样式（比如某些轮播图插件动态加 style）。这类不能靠规范禁止，得在 JS 层统一接管，用 classList 控制状态，而不是让组件直接操作 element.style。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
