R
R
Roman2017-04-06 13:37:05
BEM
Roman, 2017-04-06 13:37:05

BEM, how to go from unique to repetitive elements?

There is such a code

<div class="chatlist-container chatlist-container_hidden">
    <div class="container-header">
      <span class="chatlist-title">
           Чаты
      </span>
      <div class="container-header__button">
        <span class="icon-minus"></span>
      </div>
      <div class="container-header__button">
        <span class="icon-cancel"></span>
      </div>
    </div>
    <dl class="chatlist-container__chatlist">
        <div class="chatlist-container__chatgroup">
            <p ...
            <div ...
        </div>
        <div class="chatlist-container__chatgroup">
            
        </div>
        <div class="chatlist-container__chatgroup">

        </div>
    </dl>
  </div>

It chatlist-containeris the main container, next comes container-header, which can be used in other containers, so the class is named without dependency chatlist-container__, next comes chatlist-container__chatlist, which exists only inside chatlist-container, therefore it is named with a dependency on it, and here comes next chatlist-container__chatgroup, groups that are repeated and exist only inside chatlist-container. how to describe child elements for them, with or without dependency chatlist-container?
I imagine it like chatlist-container__chatgroup-titlethat chatlist-container__chatgroup-description, right? But then if descriptionchild elements appear, their description will come out very inconvenient.
Also, the question is how to describe CSS in this case, since at the moment I have pasta in the form:
.chatlist-container { ...
.chatlist-container .chatlist-container__chatlist { ...
.chatlist-container .chatlist-container__chatlist .chatlist-container__chatgroup { ...

If you add more child elements of groups, then kilometer selectors like
.chatlist-container .chatlist-container__chatlist .chatlist-container__chatgroup .chatlist-container__chatgroup-title { ...

Answer the question

In order to leave comments, you need to log in

1 answer(s)
O
Oleg, 2017-04-06
@werty1001

How to describe child elements for them?

Can be shortened:
.chatlist-container >>> .chatlist
.chatlist-container__chatgroup-title >>>  .chatlist__title
.chatlist-container__chatgroup-description >>> .chatlist__description

It should be like this:
.chatlist-container {...}
.chatlist-container__chatlist {...}
.chatlist-container__chatgroup {...}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question