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内的组，如何命名他们的孩子，具有或与...相关的依赖关系{ {1}}？

我想象chatlist-container和chatlist-container__chatgroup-title，对吧？但如果是这样的话，如果chatlist-container__chatgroup-description以后会有孩子，那么他们的命名可能会非常棘手且很长。

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

description

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

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

Answer 1

如果您愿意，可以采用不同的命名方法。你提到其他容器存在，并且chatlist_container只是容器的一种类型，这让我觉得可能应该有一个container类，其中chatlist版本是修饰符，即{{ 1}}。

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

这不是一个答案，因为你知道你所建造的东西远远超过我们这里的任何人，但也许这些想法可能会引导你重新考虑当前的命名方案，从而使你自己更容易。

Answer 2

如果可维护性是问题，我建议使用诸如sass之类的预处理器将有所帮助.. Sass具有嵌套功能并使用＆amp;签名以避免长规则，伪示例代码：

.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%;
            }
        }
    }
}

BEM从独特元素命名为重复元素

2 个答案: