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
Post a Comment