BEM失效源于组件边界不真实：card__content__title错误，因__仅表直接父子关系；复用标题应独立为heading-primary；--只修饰状态（如btn--disabled），禁用于布局（如btn--full-width）。
组件边界必须真实存在，否则BEM会失效
很多人把 card__content__title 当作“标准BEM”，但这是典型误用。BEM 的 __ 只能表示**直接且不可拆分的父子关系**，比如按钮里的图标只服务于该按钮本身，才叫 btn__icon；而如果同一个标题结构复用于 footer、modal、sidebar，它就不是 card 的子 element，而是独立语义块——此时应命名为 heading-primary 或 title-section。
常见错误现象：
• 组件迁移时发现 class 名锁死 DOM 类型（如 div-header 换成 section 就得全量改 class）
• 多个页面共用同一份 HTML 片段，但 class 语义却随上下文漂移（比如 list-item 在商品页是卡片，在评论区却是纯文本行）
- 每个
__必须对应一个真实、稳定、不跨组件复用的父子容器关系 - 禁止嵌套 element：
card__content__title❌ → 改为card__content+card__title（同级）或单独 block - modifier
--只修饰外观或状态，不改变布局逻辑：btn--disabled✅，btn--full-width❌（这属于容器控制）
class 和 id 必须语义化，且禁用样式/位置词
class="red" 或 id="left-sidebar" 看似省事，实则埋下维护雷：颜色变橙、侧边栏右移后，HTML 里还留着过期标识；更麻烦的是，CSS 和 JS 后续维护变成猜谜——没人知道 class="clear" 到底清浮动、清缓存还是清 localStorage。
使用场景：
• 组件被复用在不同主题、布局或设备下
• 团队多人协作，CSS/JS 分工开发
• 后续需接入无障碍工具或 SEO 自动分析
立即学习“前端免费学习笔记（深入）”；
- 用功能或内容角色命名：
article-meta、search-input、main-content - 禁用纯样式词：
red、float-left、big-text—— 这些交给 CSS 变量或 utility class（如u-text-red） - 禁用标签名嵌入：
div-header、p-intro会锁死元素类型，换section或span就得同步改 class
HTML 文件名、data- 属性、name 和 for/id 全部强制 kebab-case
大小写和连接符不统一，会在多个环节引发隐性故障：GitHub Pages 上 user_profile.html 返回 404；Alpine.js 无法识别 data-userid="123"（正确应为 data-user-id="123"）；PHP 后端可能把 <input name="userEmail"> 解析成 $_POST['userEmail'] 或 $_POST['useremail']，取决于服务器配置。
性能 / 兼容性影响：
• 不一致的命名导致构建工具路径解析失败（如 Webpack 的 html-webpack-plugin 动态注入）
• SSR 渲染时服务端与客户端 DOM diff 失败（尤其在 Next.js/Nuxt 中）
- HTML 文件名全小写 +
-分隔：product-list.html、faq-section.html，首页固定为index.html -
data-属性必须加项目前缀：data-shop-product-id，而非data-product-id（防第三方库冲突） - 表单
name和for/id必须严格一致且kebab-case：<label for="user-email"></label>↔<input id="user-email" name="user-email">
组件抽象后，质量检查必须前置到构建流程
组件化带来复用效率，也放大了单点缺陷的影响范围——改错一个 button 组件，可能让整站所有按钮都渲染异常。靠人工肉眼 review 或上线后才发现问题，成本太高。
可给出简短示例：
在 package.json 中加入：
"scripts": { "lint:html": "htmlhint \"src/components/**/*.html\"" }再配合
htmlhint --init 生成 .htmlhintrc，启用关键规则：alt-require、tag-pair、id-unique、doctype-html5
- 本地开发阶段运行
npm run lint:html，拦截未闭合标签、缺失alt、重复id等基础错误 - CI 流程中强制执行，避免带问题组件合并进主干
- 不要依赖 W3C 验证器做最终把关——它不检查语义一致性、组件复用逻辑或团队自定义规则
真正难的不是写组件，而是让每个组件的 HTML 结构在任意嵌套层级、任意主题上下文中，都能保持语义稳定、命名可信、校验可靠。这点一旦松动，组件化反而加速代码腐化。
