BEM, как перейти с уникальных элементов к повторяющимся?

Question

[Роман]

Есть такой код

<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>

В нем chatlist-container является главным контейнером, дальше идет container-header , который может быть использован в других контейнерах, поэтому класс назван без зависимости chatlist-container__, дальше идет chatlist-container__chatlist, который существует только внутри chatlist-container поэтому назван с зависимостью от него, и вот дальше идет chatlist-container__chatgroup, группы которые повторяются и существуют только внутри chatlist-container, как для них описывать дочерние элементы, с зависимостью от chatlist-container или без?

Я это представляю как chatlist-container__chatgroup-title и chatlist-container__chatgroup-description, правильно? Но тогда если у description появятся дочерние элементы, их описание выйдет очень неудобным.

Так же вопрос как в таком случае описывать CSS, так как в данный момент у меня макароны ввиде:

.chatlist-container { ...
.chatlist-container .chatlist-container__chatlist { ...
.chatlist-container .chatlist-container__chatlist .chatlist-container__chatgroup { ...

Если добавить еще дочерние элементы групп, то выйдут километровые селекторы типа

.chatlist-container .chatlist-container__chatlist .chatlist-container__chatgroup .chatlist-container__chatgroup-title { ...

Answer 1

[Олег]

Как для них описывать дочерние элементы?

Можно сократить:

.chatlist-container >>> .chatlist
.chatlist-container__chatgroup-title >>>  .chatlist__title
.chatlist-container__chatgroup-description >>> .chatlist__description

Так же вопрос как в таком случае описывать CSS, так как в данный момент у меня макароны

Должно быть так:

.chatlist-container {...}
.chatlist-container__chatlist {...}
.chatlist-container__chatgroup {...}