<分区>
标签 css module sass methodology bem
我已经开始使用 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 的文章，从不谈论这个，并展示没有解决这个问题的 super 简单的例子。
我做错了吗？
我基本上只想了解人们对这个主题的想法以及我如何改进？
最佳答案
你在正确的轨道上，但你不需要添加没有模块前缀的“基”类。
这是你的版本:
<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>
关于css - 在 BEM CSS 中标记它的最佳方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20243983/