N
N
Nikita Nafranets2016-02-20 09:46:35
BEM
Nikita Nafranets, 2016-02-20 09:46:35

How to correctly divide into blocks, elements and modifiers?

I read about bem, tried it 2 times when building websites, I liked it. The same question was already asked on the toaster, but I still can’t figure out what to do if I have 3 levels of nesting.
Here is an example (I will write in jade)

.contatcs
   .left-side
       .title
       .accordion
           ul
   .right-side

I create a separate block for each page in which I place everything else. In general, a specific wrapper for separating pages according to layout from each other. So that I myself understand that on the contacts.html page there is a block in which contacts. By the way, if you have any comments on this, please tell me, it seems to me that this is not correct)
In general, I have a contacts block, it has 2 blocks left and right, in the left block there is a heading element and a lot of accordions inside which have their own elements. By my own logic, and trying to stick to bem, I call them that.
.contacts
   .contacts__left-side
        contacts__left-side_title? contacts__left-side__title? 
        .accordion
              .accordion__elem
              .accordion__elem2
   .contacts__right-side

And here the question is how to correctly name the title element? If we have a rule block - element - modifier.
The contacts block will only be on the contacts page, the contacts__left-side block will only be in the contacts block (and the usual grid layout will not apply to it) in the contacts__left-side block I have a title element and an accordion (which in turn is also a block). I painted this to show how I see it. So what's the right way to call it all?
Or maybe use a cascade in this case? And make a title element that will only be in contacts__left-side ???
.contacts__left-side title {
css
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
Igor Shumilovsky, 2016-02-20
@Dimensi

In this case, left-side and right-side should be made blocks. Bem has no such thing as an element within an element. If this happens, then the top element should be made a block

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question