HTML只负责结构，CSS只负责样式，JavaScript只负责行为，三者须物理隔离、职责清晰；内联事件和样式严重损害维护性、缓存效率与协作效率，仅允许极少量关键首屏CSS内嵌且须显式声明media属性。
HTML结构不该承担样式或行为职责
HTML 是内容骨架，不是样式开关或事件控制器。一旦在 <button onclick="submitForm()"> 里写 JS，或用 style="display: none" 控制显隐，就等于把表现和逻辑硬编码进结构层——后续改样式要翻 HTML，加新交互得动模板，协作成本陡增。
常见错误现象：
- 内联
onclick、onchange等事件属性 -
class名含语义+样式混合，如class="red-big-button" - 用
id做纯样式锚点（#header-bg）而非语义标识（#main-header）
实操建议：
- 所有交互绑定统一走 JS 的
addEventListener，用data-*属性传参，例如<button data-action="delete" data-id="123"> -
class只表达语义角色（btn-primary、card-title），不带颜色/尺寸等视觉词 - 避免用
id控制样式；CSS 中优先用类选择器，JS 中用document.querySelector('[data-action="submit"]')
CSS 类名必须与 JS 行为解耦
当 JS 直接操作 element.className = 'active'，而 CSS 里写 .active { opacity: 1; }，看似解耦，实则隐式强依赖：类名变更即功能断裂，且无法区分“状态类”和“样式类”。
立即学习“前端免费学习笔记（深入）”；
使用场景：
- 切换 tab 面板显隐
- 表单字段验证态（
valid/invalid） - 加载中状态（
is-loading）
实操建议：
- 约定前缀区分用途：
js-专供 JS 操作（js-toggle-menu），is-或has-表状态（is-open），u-表工具类（u-hidden） - JS 中只增删
js-类，CSS 中用组合选择器控制效果，例如：.nav.js-toggle-menu.is-open > .menu - 禁用
element.style.xxx直接赋值；改用classList.toggle('is-visible')触发预设 CSS 规则
JS 不该生成或拼接 HTML 字符串
用 innerHTML = '<div class="item">' + data.title + '</div>' 本质是把 HTML 结构逻辑塞进 JS，既难调试又易 XSS，还让 CSS 选择器被迫依赖 JS 输出的 DOM 结构。
容易踩的坑：
- 模板字符串中混用变量导致未转义 HTML 注入
- 后续 CSS 改版需同步检查所有 JS 拼接处
- 服务端渲染（SSR）时 JS 生成的 HTML 与初始 HTML 不一致，触发 hydration 错误
实操建议：
- 静态结构写在 HTML 中，用
template标签存片段：<template id="item-template"><div class="item"><h3></h3></div></template> - JS 中用
document.importNode(template.content, true)克隆，再填充数据 - 动态列表优先用
document.createElement+textContent，避免innerHTML处理用户输入
构建时就要隔离三者依赖路径
开发阶段松耦合，打包后仍可能因路径引用混乱重新耦合。比如 CSS 文件里写了 background: url(../img/icon.png)，但 JS 动态插入元素时又用 src="img/icon.png"，两处路径不一致就会出错。
性能与兼容性影响：
- Webpack/Vite 中若未配置
url-loader或asset模块规则，图片路径在 JS 和 CSS 中解析结果不同 - CDN 部署时，CSS 中相对路径可能指向错误域名
实操建议：
- 所有资源路径统一走构建工具别名，如
@/assets/icon.svg，在 JS 和 CSS 中都用相同写法 - CSS 中禁用绝对路径（
/static/），JS 中用import icon from '@/assets/icon.svg'获取最终 URL - HTML 模板中用
<link rel="stylesheet" href="%PUBLIC_URL%/style.css">，确保 public 目录资源路径可预测
真正难的不是写分离代码，而是守住边界——当产品要加一个“点击变红”按钮时，本能反应是直接给它加 onclick 和 style，而不是去补一个 btn--danger 类、一个 data-action="highlight" 属性、一行 addEventListener 绑定。这种克制，才是工程实践落地的关键。
