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只是一种类型的容器，这让我认为可能应该有一个container类，其中聊天列表版本是修改器，即container--chatlist。

另外，在我看来，仅仅因为chatgroup目前只存在于聊天列表容器中，并不意味着它必须在它的前面加上容器的名称。给它一个像chatgroup这样的名字可以让它在某个时候在容器外部使用。那么它的任何孩子只需要在他们的名字前面加上chatgroup。

这不是一个答案，因为你知道你在建造的远比我们这里的任何人都多，但也许这些想法可能会导致你重新思考当前的命名方案，从而使自己更容易。

Answer 2

如果可维护性问题，我建议使用一个预处理器，如sass将助阵..萨斯有一个嵌套功能和使用&标志，以避免长时间规则，伪代码示例：

.wrapper { 
    height: 100%; 

    .b-header { 
     display: flex; 
     background: #F5F5F5; 
     flex-direction: column; 
     padding: 0 2rem; 
     margin-top: 2rem; 

     &__about { 
      width: 100%; 
      padding: 2rem; 
      word-wrap: break-word; 

      .title { 
       font-size: calc(1.5rem + 3vw); 
       margin-bottom: 5rem; 
      } 

      .job { 
       font-size: calc(1.8rem + 3vw); 
       margin-bottom: 1.5rem; 
      } 

      .cv { 
       display: inline-block; 
       font-size: calc(0.5rem + 3vw); 
       margin: 3rem 0; 
      } 
     } 

     &__image { 
      img { 
       min-width: 100%; 
       max-width: 100%; 
      } 
     } 
    } 
}