BEM 样式 class 名称的嵌套深度指南

Question

通过对我在 SO 上提出的另一个问题的推荐，我开始接触 BEM，并且发现其中非常有价值。使用它一年后，我经常发现自己有很深的嵌套层次。例如

.abc__main
.abc__main__card
.abc__main__card__item
.abc__main__card__item__heading
.abc__main__card__item__icon
.abc__main__card__item__text
.abc__main__card__item__text__em
.abc__main__card__item__text__em--green

我很确定 BEM 的意义在于摆脱组合，但我似乎将自己锁在其中。我已经阅读了 BEM website，但我觉得我一定遗漏了一些东西。

是否有某种指南可以帮助了解应该如何撰写项目？

例如我应该像这样把它拆开吗（在@Chris Pickford 建议的帮助下）：

.abc__main

.abc__card

.abc__item
.abc__item__heading
.abc__item__icon
.abc__item__text
.abc__item__text__em
.abc__item__text__em--green

编辑：感谢 Chris 的回答，我刚刚意识到它不叫 BEEM 或 BEEEM，而只是 BEM，块内应该只有一个嵌套元素。

Answer 1

您应该完全展平您的块结构以使用 BEM 约定。

它可能看起来像这样：

.abc {}
.abc__main {}
.card {}
.card__item {}
.card__heading {}
.card__icon {}
.card__text {}
.card__text--em {}
.card__text--green {}

它在常见问题解答中：http://getbem.com/faq/#css-nested-elements

BEM 样式 class 名称的嵌套深度指南

Guidelines for how deep to nest BEM style class names

css

bem