Y
Y
Yeni2020-05-04 15:36:23
BEM
Yeni, 2020-05-04 15:36:23

How to indent two or more blocks differently using BEM?

I don't really understand how to make different indentation for two elements? I figured out how to position the block if it is alone, through a mix with the parent element:

<div class="some-parent">
    <div class="my-something some-parent__something">...</div>
</div>


But what if there are more my-something blocks? For example 3 and each will require a different margin? What is the best thing to do in this case, not to fence something like that through the modifier, is it not about that?

<div class="some-parent">
    <div class="my-something my-something_offset1">...</div>
    <div class="my-something my-something_offset2">...</div>
    <div class="my-something my-something_offset3">...</div>
</div>


Or will this be okay?

<div class="some-parent">
    <div class="my-something some-parent__something1">...</div>
    <div class="my-something some-parent__something2">...</div>
    <div class="my-something some-parent__something3">...</div>
</div>

Answer the question

In order to leave comments, you need to log in

2 answer(s)
N
n1ksON, 2020-05-04
@it400

If all three elements have different indents, then it is worth wrapping them in different blocks. And to set indents to blocks.

W
wyzemind, 2020-05-04
@wyzemind

If my-something is a separate component, then you can add a modifier to it, if necessary, through an underscore. I don't see a problem.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question