HTML无需命名空间规范，class和id本质是语义标识符；BEM通过block__element--modifier结构表达层级关系，而非真正命名空间；id必须唯一且仅用于锚点或JS绑定，class用于样式复用，禁用样式描述名。
HTML 中不存在“命名空间规范”这个概念，强行套用会引发 class 冲突、CSS 作用域失控、JS 选择器失效等问题。所谓“统一命名空间”，是把 CSS/JS 工程中的模块化思路错误迁移到 HTML 层的结果。HTML 的 class 和 id 本质是语义标识符，不是编程语言里的命名空间。
为什么 HTML 不需要命名空间
HTML 是结构标记语言，不是作用域语言。浏览器不解析 class="user-card__title" 中的 user-card 部分作为“命名空间”，它只认整个字符串值。CSS 选择器匹配、JS querySelector 查找、可访问性工具读取，全部基于完整 class 字符串，而非前缀分割逻辑。
- 加前缀如
ns-user-card或myapp-header纯属冗余，破坏语义一致性 - 团队协作中靠 BEM 或 kebab-case 规范约束即可，无需额外“隔离”
- 真正需要隔离的是 CSS（用 CSS Modules / scoped styles）或 JS（用 ES 模块），不是 HTML 标签本身
class 和 id 的实际使用边界
混淆 class 和 id 的用途，是比“命名空间”更常见的根源问题。
-
id必须全局唯一，且仅用于锚点跳转（#section-2）或 JS 强绑定目标（如document.getElementById("modal-close")） -
class用于样式复用和行为分组，允许多个元素共用，如class="btn btn--primary" - 禁止用
id做样式钩子（#header-nav），它无法复用，且易被 JS 逻辑意外覆盖 - 避免纯功能型 class 名，如
class="float-left"—— 这属于 CSS 实现细节，应由 utility class 系统（如 Tailwind）统一管理，而非混入业务 class
BEM 是目前最贴近“命名空间意图”的可行方案
BEM（Block–Element–Modifier）不是命名空间，但它用约定替代了命名空间的需求：通过 block__element--modifier 结构，在扁平 class 字符串里表达层级与状态关系。
立即学习“前端免费学习笔记（深入）”；
-
product-card是 Block（独立可复用组件） -
product-card__title是 Element（属于该 Block 的子部分） -
product-card--featured是 Modifier（改变 Block 行为或外观的状态） - 所有 class 都是独立字符串，无嵌套依赖，CSS 选择器也无需写成
.product-card .product-card__title，直接.product-card__title即可 - 注意：BEM 要求严格禁止下划线以外的特殊符号，且不允许嵌套层级（如
product-card__title__text是错的）
容易被忽略的兼容性陷阱
某些看似“增强隔离性”的写法，会在真实环境中出问题：
- 在
class中混用大写字母或驼峰（如userProfileCard）：违反 HTML5 规范，部分旧版校验工具报错，且与 CSS 类名大小写敏感规则冲突 - 用数字开头的 class（如
1st-section）：CSS 中需写成.\31 st-section才能选中，徒增维护成本 - 过度缩写（如
usr-crd）：牺牲可读性，新成员无法推断含义，反而增加理解负担 - 动态拼接 class（如
class="card card--{{status}}"）：若status值含空格或非法字符，会导致 class 断裂，必须做白名单过滤
真正的可维护性来自语义清晰、约束明确、工具链支持（如 HTMLHint + 自定义 BEM 规则），而不是给 class 加一层虚构的“命名空间”外壳。
