应在body上使用ID而非class，因其唯一性高、优先级高且适合作为命名空间锚点；ID必须用kebab-case命名；样式须以body#xxx开头限定作用域；SPA需路由同步更新ID；SSR场景下ID必须服务端注入。

为什么要在 body 上加页面 ID 而不是用 class？

因为 class 可复用、可叠加，容易在组件或第三方脚本中被意外覆盖或重复添加；而 ID 在单页内强制唯一，CSS 选择器优先级更高，且天然适合作为顶层命名空间锚点。比如你写 #login-page .btn，比 .page-login .btn 更不容易被全局样式干扰。

body ID 命名该用 kebab-case 还是 camelCase？

必须用 kebab-case（小写字母+短横线），否则会触发 CSS 解析异常或 JS 获取时出错。浏览器对 ID 的合法性要求比 class 严格：不能以数字开头、不能含空格或特殊符号（除短横线和下划线外），且多数 CMS 或 SSR 框架（如 Next.js、Nuxt）生成的 ID 默认就是 kebab-case。示例：<body id="user-profile-page"> ✅，<body id="UserProfilePage"> ❌（部分浏览器虽能渲染，但 document.getElementById("UserProfilePage") 可能返回 null）。

如何避免页面 ID 样式污染其他页面？

关键在于限制作用域——所有页面专属样式必须以 body#xxx 开头，禁止单独使用 ID 选择器（如 #header）。否则一旦多个页面都用了同名 ID，样式就会互相穿透。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• ✅ 正确写法：

  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 前先清空旧 ID，防止残留，例如 document.body.removeAttribute('id') 再设新值

实际项目中最容易被忽略的是：服务端渲染（SSR）场景下，body ID 必须由服务端注入，不能等 JS 加载后再补——否则首屏样式会闪动或失效。这意味着你需要在模板（如 EJS、Handlebars）或框架的 SSR 钩子（如 Next.js 的 getServerSideProps）里就决定并输出正确的 id 属性。