BEM 里加 c- 和 l- 前缀不是锦上添花，而是防止组件样式被布局规则意外覆盖的硬性隔离手段。
为什么必须区分 c-（component）和 l-（layout）
大型项目里最常踩的坑，是把「容器尺寸/位置/流式行为」和「组件自身视觉表现」混写在一个类名或同一份 CSS 文件里。比如写 .header { display: flex; justify-content: space-between; } —— 这段代码实际在干布局的事，却挂在一个语义为“头部”的组件名下。一旦其他模块也用 .header，或者未来要复用这个头部到弹窗里，它就会强行把弹窗内容也拉成 flex 排列，而你根本没意识到这是谁改的。
用前缀强制划清责任边界：c-header 只管 header 长什么样（颜色、字体、内边距、图标大小）；l-header 只管它在哪、多宽、怎么对齐、是否固定。两者互不侵入，调试时一眼能分清问题出在“长得不对”还是“摆得不对”。
-
c-类名只出现在组件级 SCSS 文件中，且永远不包含display、position、grid-template、float等布局属性 -
l-类名只出现在 layout 目录下的文件中，禁止写color、border-radius、box-shadow等视觉属性 - HTML 中可以同时存在
class="l-main c-button"，但不能出现class="c-main"或l-button—— 名称本身已定义用途
c- 和 l- 在 BEM 三段式中的合法位置
前缀必须加在 block 名前，而不是插在中间。错误写法如 header__c-logo 或 c-header--primary，会破坏 BEM 的可解析性和工具链校验能力。
正确结构只有两种：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
c-header__logo✅ —— 表示「组件 header 内部的 logo 元素」 -
l-grid__col✅ —— 表示「布局 grid 下的列元素」 -
c-button--loading✅ —— modifier 永远依附于带前缀的 block -
l-sidebar--collapsed✅ —— 同样适用，collapse 是布局状态，不是视觉状态
注意：l- 块通常不带 element 或 modifier，因为布局单元本身应尽量原子化、不可拆解。像 l-main__content 是反模式 —— 如果需要细分内容区域，应该用另一个 l- 块（如 l-main-content），而非嵌套。
构建时如何拦截错误使用
靠人眼 Review 很难发现 c-modal__close-btn 实际该是 c-button + l-modal__footer 的组合。必须让工具在保存或提交阶段报错。
- 用
stylelint-selector-bem-pattern配置两个规则：一个要求c-开头的 block 必须匹配/^c-[a-z][a-zA-Z0-9]+$/，另一个限制l-开头的 block 禁止出现__（即不允许 layout block 有 element） - 在 CI 中跑
npx stylelint "**/*.scss" --custom-syntax postcss-scss，失败则阻断 PR 合并 - 编辑器里装 Prettier + Stylelint 插件，保存即高亮
c-card__title--dark这种误把主题当布局 modifier 的写法（--dark应属c-，不是l-）
与 CSS 变量命名的联动关系
c- 和 l- 前缀会影响 CSS 自定义变量的作用域设计。变量不能裸名，但前缀要跟类名对齐，否则维护时会断链。
-
--c-button-color-primary✅ —— 对应c-button--primary的颜色值 -
--l-grid-gap✅ —— 对应l-grid的栅格间距 - 禁止写
--button-color或--grid-gap，也不推荐--ui-button-color（ui-和c-混用会让开发者困惑到底哪个是主命名空间） - 所有
c-组件变量统一注入到:root，但l-变量建议只在对应 layout class 内部 :host 或&作用域中定义，避免污染全局计算上下文
真正容易被忽略的是：当一个 c-card 被放进 l-sidebar 时，它的 margin 应由 l-sidebar__item 控制，而不是在 c-card 里写 margin-bottom: 1rem —— 这条线一旦模糊，整个项目的样式归属就又回到「谁写的谁负责」的老路上。前缀只是标记，约束力来自目录结构、构建校验和团队对每一行 CSS 责任边界的共识。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
