Best way of marking this up in BEM CSS [closed] - css

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have been starting to use BEM as a CSS methodology for organizing my CSS and over the course of the projects, pretty much everything has turned into a module.
I put layout styles for a module in the parent module. That has been working nicely.
What has been confusing me and I can't grasp a hold of is something like this: Say I have the following:
<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>
So at this stage, following the rules of BEM, I would add the parent class name of a module to it's own module name:
<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>
and then add the sole module name to each one:
<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>
Does this look right?
What would you call the individual files holding each of the module styles?:
- picture-box.sass
- picture-holder.sass
- picture.sass
- caption.sass
It seems like whenever I get nesting like this, I end up with a module that hardly has a meaning or is something too generic like "picture", "image", "box" or "caption"
I get the same problems higher up the hierarchy. So where I have a wrapping div around the site, e.g.: .container, I now have .container-header, .container-main and .container-footer.
I like the main concept behind BEM and everything in modules but it's the module in module thing I get confused with.
All the articles explaining BEM, never talk about this and show super simple examples that don't hit this issue.
Am I doing it wrong?
I basically just want peoples ideas on this subject and how I can improve?

Answer 1

you are on the right track, but you don't need to add the 'base' class without the module prefix.
Here is your version:
<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>
Here's what you likely need:
<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>
Depending on how you are going to use 'picture-box' you could further simplify:
<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>