内联style和标签必须移出html，因style阻塞渲染且无法缓存，style属性污染结构、破坏选择器与响应式；外部css 404时内嵌样式会掩盖问题；类名须语义化、功能化，避免视觉描述；重构需同步更新js/css引用并验证；语义化标签替换需兼顾兼容性与无障碍。
为什么内联style和
浏览器加载时，style标签内的CSS会阻塞渲染，且无法被缓存复用；style属性则彻底污染结构，让class选择器失效、媒体查询失灵、伪类不可控。更隐蔽的问题是：当外部CSS因路径错误 404 时，内嵌样式会“兜底”掩盖问题，导致你调试半天才发现根本没加载到真正的样式文件。
常见错误现象：Chrome DevTools → Styles面板里同名类出现两处定义，一处来自<style></style>，一处来自main.css，优先级混乱导致样式不生效；多人协作时，有人在<style></style>里加if注释模拟条件逻辑，结果上线后 JS 动态改 class 失效。
- 所有通用布局、字体、颜色、间距规则，必须抽到
base.css或theme.css中，通过<link rel="stylesheet" href="base.css">引入 - 仅允许在 SPA 的初始 HTML 中内嵌极少量首屏关键 CSS（如
.hero-text），且必须带media="screen and (min-width: 0px)"显式声明 - 禁止在 Vue/React 模板中写
style="margin-left: 20px"，改用语义化工具类如class="u-ml-5"或 CSS-in-JS 封装
如何给 class 命名才能避免“div1”“box-red”这类坏味道
类名不是描述外观，而是表达意图。比如box-red在主题切换时立刻失效；div1对 JS 选择器和可访问性树都毫无意义。真正可维护的类名应让人一眼看懂“它是什么”，而不是“它长什么样”。
- 用功能或内容命名：
class="article-meta"而非class="gray-small-text" - 避免纯视觉词：
red、left、big—— 改用is-error、sidebar、heading-lg - 组件级类名加前缀：
btn-primary、card-feature，防止全局污染 - JS 绑定用
data-属性：data-js="toggle-menu"，而非依赖class="nav-toggle"，解耦行为与表现
重构时怎样安全地替换旧 class 并同步更新 JS/CSS
直接全局搜索替换class="header"为class="site-header"很危险：JS 可能用document.querySelector('.header')取元素，CSS 可能有.header nav这种后代选择器。没同步更新，页面当场白屏或交互失效。
- 先确认所有引用点：在 VS Code 中右键
header→Rename Symbol，编辑器会高亮所有 HTML、CSS、JS 中的匹配项 - 检查 CSS 文件中是否含
.header相关规则，尤其注意@media块内、:hover伪类、后代选择器（如.header .logo） - JS 中查找
getElementsByClassName、querySelector、classList.contains等调用，确保传入新类名 - 改完后用
grep -r "header" src/（Linux/macOS）或 VS Code 全局搜索二次验证
语义化标签替换 div 时容易忽略的兼容性细节
把<div class="nav">改成<code><nav></nav>看起来只是换了个标签，但实际影响 DOM 树、无障碍树、SEO 权重甚至某些老版 JS 库的getElementsByTagName行为。IE11 不支持<main></main>的语义化作用，需补role="main"。
-
<header></header>和<footer></footer>可以多个，但<main></main>在页面中只能有一个，且不应嵌套在<article></article>或<aside></aside>内 -
<section></section>必须有标题（<h2></h2>及以上），否则语义断裂；无标题内容优先用<div> <li>IE11 及以下需为<code><main></main>、<article></article>等添加role属性：<main role="main"></main> - 屏幕阅读器对
<nav></nav>的识别依赖其子元素是<ul><li></ul>结构，纯<a></a>并列可能被忽略
重构最难的不是改标签或抽 CSS，而是判断某个
div到底该换成<section></section>还是<article></article>——这取决于它承载的是“一组相关内容”还是“独立可分发的内容单元”。这个边界模糊时，宁可先保留div加role，也别强行语义化。
