在 BEM CSS 中标记它的最佳方法 [关闭]

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>

这看起来对吗？

您将保存每个模块样式的各个文件称为什么？： - 图片框.sass - 图片持有人.sass - 图片.sass - 标题.sass

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

我在更高层次上遇到同样的问题。所以我在站点周围有一个包装 div，例如：.container，我现在有 .container-header、.container-main 和 .container-footer。

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

所有解释 BEM 的文章，永远不要谈论这个，并展示不会遇到这个问题的超级简单示例。

我做错了吗？

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

Answer 1

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

这是你的版本：

<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>