css - BEM naming from unique to repeating elements -


i have code this

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

where chatlist-container main container, goes container-header , can reused in containers, named without dependency chatlist-container__, goes chatlist-container__chatlist, exists inside chatlist-container named dependency, , goes chatlist-container__chatgroup, groups can repeat exists inside chatlist-container, how name childs, or withoud dependency of chatlist-container ?

i imagine chatlist-container__chatgroup-title , chatlist-container__chatgroup-description, right? if so, if description have , childs later, naming can tricky , long.

also, if so, how write css, looks like:

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

but if add child elements groups, selectors getting kilometer long, , looks this

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

a different approach naming taken, if desired. mentioned other containers exist, , chatlist_container 1 type of container, makes me think perhaps there should container class somewhere chatlist version being modifier, i.e. container--chatlist.

also, in opinion, because chatgroup exists within chatlist container doesn't mean has have container's name prefixed it. giving name chatgroup allows used outside of container @ point perhaps. of children need have chatgroup prefixed names.

this not answer, know building far more of here, perhaps these thoughts might lead rethinking current naming scheme , making things easier yourself.


Comments