Question

我已经开始使用BEM作为CSS方法来组织我的CSS和整个项目的过程，几乎所有的东西都变成了一个模块。

我在父模块中放置模块的布局样式。这一直很好。

令我感到困惑的是，我无法抓住这样的事情：说我有以下内容：

<div class="picture-holder">
  <div class="picture-box">
    <img class="image" />
    <span class="caption">text</span>
  </div>
  <div class="picture-box">
    <img class="image" />
    <span class="caption">text</span>
  </div>
</div>

所以在这个阶段，按照BEM的规则，我会将模块的父类名添加到它自己的模块名中：

<div class="picture-holder">
  <div class="picture-holder__picture-box">
    <img class="image" />
    <span class="caption">text</span>
  </div>
  <div class="picture-holder__picture-box">
    <img class="picture-box__image" />
    <span class="picture-box__caption">text</span>
  </div>
</div>

然后为每个模块添加唯一的模块名称：

<div class="picture-holder">
  <div class="picture-holder__picture-box picture-box">
    <img class="image" />
    <span class="caption">text</span>
  </div>
  <div class="picture-holder__picture-box picture-box">
    <img class="picture-box__image image" />
    <span class="picture-box__caption caption">text</span>
  </div>
</div>

这看起来不错吗？

您认为持有每种模块样式的单个文件是什么？： - picture-box.sass - picture-holder.sass - picture.sass - caption.sass

似乎每当我像这样嵌套时，我最终会得到一个几乎没有意义的模块，或者像“图片”，“图片”，“盒子”或“标题”那样过于通用的模块

我在层次结构的上层得到了同样的问题。所以我在网站周围有div包裹，例如：.container，我现在有.container-header，.container-main和.container-footer。

我喜欢BEM背后的主要概念和模块中的所有内容，但它是模块中的模块，我感到困惑。

所有解释BEM的文章，从不谈论这个，并展示了没有遇到这个问题的超级简单例子。

我做错了吗？

我基本上只想要人们关于这个主题的想法以及我如何改进？

Answer 1

你走在正确的轨道上，但你不需要添加没有模块前缀的'base'类。

这是您的版本：

<div class="picture-holder">
  <div class="picture-holder__picture-box picture-box">
    <img class="image" />
    <span class="caption">text</span>
  </div>
  <div class="picture-holder__picture-box picture-box">
    <img class="picture-box__image image" />
    <span class="picture-box__caption caption">text</span>
  </div>
</div>

以下是您可能需要的内容：

<div class="picture-holder">
  <div class="picture-box">
    <img class="picture-box__image" />
    <span class="picture-box__caption">text</span>
  </div> 
  <div class="picture-box">
    <img class="picture-box__image" />
    <span class="picture-box__caption">text</span>
  </div>
</div>

根据您使用“图片框”的方式，您可以进一步简化：

<div class="picture-holder">
  <div class="picture-holder__box">
    <img class="picture-holder__image" />
    <span class="picture-holder__caption">text</span>
  </div> 
  <div class="picture-holder__box">
    <img class="picture-holder__image" />
    <span class="picture-holder__caption">text</span>
  </div>
</div>

在BEM CSS中标记这一点的最佳方式

1 个答案: