0

我已经开始使用 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 的文章，从不谈论这一点，并展示不会遇到这个问题的超级简单示例。

我做错了吗？

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

4

1 回答 1

2

你在正确的轨道上，但你不需要添加没有模块前缀的“基”类。

这是您的版本：

<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>
于 2013-11-27T14:02:28.030 回答