Answer the question
In order to leave comments, you need to log in
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>
chatlist-container
is 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
? chatlist-container__chatgroup-title
that chatlist-container__chatgroup-description
, right? But then if description
child elements appear, their description will come out very inconvenient. .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 the question
In order to leave comments, you need to log in
How to describe child elements for them?
.chatlist-container >>> .chatlist
.chatlist-container__chatgroup-title >>> .chatlist__title
.chatlist-container__chatgroup-description >>> .chatlist__description
.chatlist-container {...}
.chatlist-container__chatlist {...}
.chatlist-container__chatgroup {...}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question