全局公共样式必须用base-前缀且前置加载，禁用b-前缀；仅允许_reset.css、_base-typography.css、_utilities.css、_theme-vars.css四类下划线文件承载，严禁混入业务逻辑或塞入block文件。
全局公共样式不该塞进任何 .block 文件里，也不该用 b- 前缀——它不是某个业务模块的私有依赖，而是全站生效的基础契约。
base- 前缀才是全局样式的唯一合法前缀
Base 类必须用 base- 开头，比如 base-button、base-text、base-reset。加 b- 会让人误以为它是某个 block 的底层实现，结果没人敢动、越积越多。
-
base-类只定义跨组件一致的行为：默认边距、字体栈、按钮基础尺寸、表单控件默认状态 - 它不包含任何业务语义，也不依赖具体 DOM 结构（比如不能写
.base-button .icon） - 必须在所有 BEM block CSS 之前加载，否则
.button__text { color: var(--color-primary) }会取不到变量
哪些文件属于“非 BEM”基础层
只有四类带下划线前缀的文件能承载全局样式，且命名和职责严格固定：
-
_reset.css：仅含normalize或margin: 0等重置规则，无任何 class -
_base-typography.css：定义html缩放、body行高、h1–h6默认样式 -
_utilities.css：纯功能类，如.u-mt-4、.u-flex-center，禁止出现.u-nav-spacer这类语义名 -
_theme-vars.css：只含 CSS 自定义属性，如--color-primary、--spacing-md，不带任何选择器
顺序错位或混入业务逻辑（比如在 nav.css 里写 body { font-family: sans-serif }），后续换主题或做 SSR 样式隔离时就会卡死。
立即学习“前端免费学习笔记（深入）”；
Component 如何安全复用 base 样式
直接 class="button base-button" 看似简单，但风险在于 base 类未来加了 display: inline-flex，而某个按钮需要 display: block，就会覆盖失控。
- 用 Sass 时，把 base 定义为占位符：
%base-button，在button.scss中写@extend %base-button - 用原生 CSS 时，把可变部分抽成自定义属性：
--base-btn-padding、--base-btn-bg，Component 中只覆写需要的部分 - 禁止在 Component 文件里写
.base-button {}或.base-button .icon—— 这破坏 BEM “一个 class 对应一个职责”的前提
c- 和 l- 前缀是隔离全局与布局的关键防线
大型项目里最常踩的坑，是把布局行为（display、position、grid-template）和视觉表现（color、border-radius）混在同一份样式中。
-
c-header只管“长得什么样”，禁止出现display或z-index -
l-header只管“摆在哪、多宽、怎么对齐”，禁止出现color或box-shadow - HTML 中可以同时写
class="l-main c-button"，但不能出现c-main或l-button—— 名称本身已定义用途 -
l-块禁止带 element，l-main__content是反模式；需要细分就用另一个l-块，比如l-main-content
真正难的不是写对命名，而是让团队所有人遵守加载顺序、前缀边界和职责分离——工具链（如 stylelint-selector-bem-pattern）必须在提交阶段强制拦截，而不是靠人眼 Review。
