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 中的组，如何命名他们的 child , 有或没有 chatlist-container ?

的依赖

我想这就像 chatlist-container__chatgroup-title 和 chatlist-container__chatgroup-description，对吧？但如果是这样的话，如果 description 以后会有和 childs，他们的命名可能会非常棘手和冗长。

另外，如果是这样，怎么写css，现在看起来像：

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

但是，如果我将 child 元素添加到我的组中，它们的选择器就会长一公里，看起来像这样

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

Answer 1

如果可维护性是个问题，我建议使用 sass 等预处理器会有所帮助。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%;
            }
        }
    }
}

Answer 2

如果您愿意，可以采用不同的命名方法。您提到存在其他容器，并且 chatlist_container 只是容器的一种类型，这让我认为也许应该有一个 container class 某个地方，聊天列表版本是一个修饰符, 即 container--chatlist.

此外，在我看来，仅仅因为 chatgroup 目前仅存在于聊天列表容器中并不意味着它必须以容器名称为前缀。给它一个像 chatgroup 这样的名字可能允许它在某些时候在容器之外使用。然后它的任何children只需要在他们的名字前加上chatgroup。

这不是一个答案，因为您比我们这里的任何人都更了解自己正在构建什么，但也许这些想法可能会让您重新考虑当前的命名方案，从而让事情变得更容易。

BEM 从唯一元素到重复元素的命名

BEM naming from unique to repeating elements

css

bem