CSS不同页面差异化样式：body唯一ID命名空间

在实际开发中，维护大型项目（如几十个页面的系统）时，每个页面样式差异化的问题往往非常棘手。全局样式滥用、组件样式互相干扰，修改一个按钮就可能影响整个系统。此时，一个可靠且优雅的解决方案是：在 body 标签上挂载唯一的页面 ID，作为样式隔离的“锚点”。

为什么是 ID，而不是 class？

首先思考一个问题：class 可以叠加、复用，但容易被第三方脚本或组件库的全局样式“误伤”。ID 则不同，它在单页内是强制唯一的标识，CSS 选择器优先级天然更高。例如，.page-login .btn 可能被其他 .btn 样式覆盖，而 #login-page .btn 相当于给样式加了一把“专用锁”，外部干扰基本无法进入。简单来说，ID 更适合作为顶层的命名空间容器，而 class 适合作为可复用的样式单元。

命名规范：kebab-case 是必须的，不是选择

命名必须使用 kebab-case（小写字母加短横线）。这并非随意规定，而是有实际原因：浏览器对 ID 的合法性要求比 class 更严格。ID 不能以数字开头，不能包含空格和特殊符号（短横线和下划线除外）。更重要的是，许多 SSR 框架（如 Next.js、Nuxt）默认生成的 ID 就是 kebab-case 格式。 - 正确示范： - 错误示范： —— 某些浏览器虽能渲染，但在 JavaScript 中通过 document.getElementById("UserProfilePage") 获取时容易返回 null。

如何锁住作用域，不让样式跨页面传染？

核心原则：所有页面专属样式必须显式以 body#xxx 开头限定作用域。切勿省略写成 #header 这样的选择器，否则另一个页面的某个模块若恰好也使用 id="header"，样式就会混乱。 - 正确写法：body#checkout-page .cart-summary { font-size: 14px; } - 危险写法：#cart-summary { font-size: 14px; } —— 该规则会在所有包含 id="cart-summary" 的页面生效。 - 特别提醒：如果项目使用 Vue 或 React，组件内的 scoped style 默认不会自动继承 body 上的 ID。必须主动进行透传，或使用 :global() 配合 body#xxx 手动建立作用域关系。

动态路由场景下，body ID 如何实时同步？

单页应用中最容易被忽略的问题之一：body ID 不能仅在 HTML 初始渲染时写死，路由切换后必须随之更新，否则 CSS 仍按旧 ID 生效，而页面内容已改变。 不同框架的具体实现方式略有不同： - **Vue Router**：在 router.afterEach 钩子中执行 document.body.id = to.meta.bodyId || ''，同时在路由配置中为每个 route 显式设置 meta: { bodyId: 'dashboard-page' }。 - **React Router v6**：使用 useEffect 监听 location.pathname，匹配后调用 document.body.setAttribute('id', ...)。 - **清理环节必须做**：每次设置新 ID 前，先执行 document.body.removeAttribute('id') 清空旧值，防止残留标签导致样式叠加。 还有一个容易踩坑的地方：服务端渲染（SSR）场景下，body ID 必须在服务端直接注入，不能等浏览器端 JavaScript 加载完成后再补设，否则首屏会出现样式闪动或失效。实际解决方案是，在模板文件（如 EJS、Handlebars）或框架的 SSR 钩子（如 Next.js 的 getServerSideProps）中，将当前页面对应的 ID 属性确定并直接输出到 HTML 中。