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

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