BEM and blocks size

[glaszczyk]

Hello!

I'm newbie in BEM and trying to use it in my workflow but I'm not sure how solve that problem.

I would like to create simple layout and position all elements i.e. something like this:

<div class="main-window">
    <div class="gallery">
        <!-- Here is gallery content -->
    </div>
    <div class="story">
        <!-- Here is story content -->
    </div>
</div>

Should I style .gallery and .story with position and dimension properties or maybe should I nest them in .main-window elements. Something like that:

<div class="main-window">
    <div class="main-window__gallery-wrapper>
        <div class="gallery">
            <!-- Here is gallery content -->
        </div>
    </div>
    <div class="main-window__story-wrapper>
        <div class="gallery">
            <!-- Here is story content -->
        </div>
    </div></div>

Now I can separate .gallery and .story styling from their position because I can define size and position with .main-window elements

.main-window__gallery-wrapper {
    width: 500px;
    margin: 0 auto;
}
.gallery {
    /* formatting without size and position */
}
.main-window__story-wrapper {
    width: 500px;
    margin: 30px auto;
}
.story {
    /* formatting without size and position */
}

Sorry for (probably) such a simple question but I didn't find answer for that.

Thanks.

[vithar]

Your example above is correct. Only, I would use the no -wrapper, main-window__gallery is enough.

See also https://en.bem.info/methodology/css/#mixes

[glaszczyk]

Thank you. I used wrapper only to make my idea clearer. But good to know that is not best idea for name. I have to spend more time on naming convention.

[glaszczyk]

I understand how mixes work but I think my example doesn't fit that solution.

[vithar]

Your example perfectly fit.

[glaszczyk]

Can you please explain that? Let's say, when I would like to position my .gallery and .story using flexbox mixes probably don't work. But maybe I missed something. Thanks

[tadatuta]

@glaszczyk with mixes your markup will look like this:

<div class="main-window">
    <div class="gallery main-window__gallery">
        <!-- Here is gallery content -->
    </div>
    <div class="story main-window__story">
        <!-- Here is story content -->
    </div>
</div>

So you may apply all the needed styles (flexbox or whatever) to elements of main-window and keep gallery and story reusable just the same way as in your example above but without extra DOM nodes.

[glaszczyk]

Thanks a lot. Now I see what do you mean and where both approaches differ. So both are correct but can be used little different.