ITCSS分层决定样式加载与权重顺序，BEM专注components层类名组织；BEM类名仅限components层使用，不得出现在settings至trumps其他层级，修饰符仅表达组件内部状态，不可替代trumps层的响应式或主题逻辑。
ITCSS分层决定样式加载顺序，BEM负责类名组织
ITCSS本身不规定类名怎么写，它只管样式文件按“通用 → 特定”顺序排列：设置（settings）、工具（tools）、通用（generic）、元素（elements）、对象（objects）、组件（components）、实用工具（trumps）。BEM则专注在 components 层里定义每个模块的类名结构。两者分工明确——ITCSS解决“哪些样式先被覆盖”，BEM解决“哪个类名属于哪个模块”。如果你把 BEM 类名直接塞进 generic 或 tools 层，反而会破坏层级语义。
BEM类名必须严格绑定到ITCSS的components层
在 ITCSS 项目中，components 层是唯一允许出现完整 BEM 结构的地方。比如：.card、.card__title、.card--featured 只能定义在 components/_card.less 中，而不能散落在 elements（如 h1、ul 基础重置）或 objects（如 .o-layout）里。否则会出现两个问题：
- 类名语义断裂：一个
.button__icon出现在objects/_grid.less里，开发者无法判断它是否真属于按钮模块 - 构建时难以提取：工具链（如 PostCSS 插件）依赖目录层级识别组件边界，跨层写 BEM 会导致自动文档生成失败
修饰符（Modifier）不能替代ITCSS的trumps层
常见错误是把响应式断点或主题切换逻辑全压进 BEM 修饰符，比如写 .card--md-screen 或 .card--dark-theme。这会让组件层膨胀且难以维护。正确做法是：
-
--md-screen这类响应式变体应归入trumps/_responsive.less，用媒体查询包裹.card类本身 -
--dark-theme应由顶层 class（如body[data-theme="dark"]）驱动，配合trumps/_theme.less统一覆盖 - BEM 修饰符只表达组件内部状态：例如
.card--loading、.button--disabled，不涉及布局或主题
工具类（utility classes）必须避开BEM命名
ITCSS 的 tools 和 trumps 层要保持“无上下文”特性，因此不能用 BEM 格式。比如：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
.u-margin-top-lg、.t-text-center（前缀u-/t-明确标识工具属性） - ❌ 错误：
.spacing__top-lg、.text--center（混淆了组件语义与工具职责）
一旦在工具层混用 BEM，后续想抽离成独立 CSS-in-JS 工具包或 Tailwind 替换方案时，就会因命名耦合而卡住。
真正容易被忽略的是：BEM 的 __ 和 -- 分隔符只在组件内部有效；一旦跨出 components/ 目录，它们就不再是“BEM”，而是干扰 ITCSS 层级意图的噪音。
