Question

我真的很想要BEM背后的想法，但有时候我很难决定如何模拟我正在做的事情。例如：

<ul class="events">
  <li class="event">

    <!-- We could go this way... -->

    <div class="event__meta event__meta--title"></div>
    <div class="event__meta event__meta--date"></div>
    <div class="event__meta event__meta--location"></div>

    <!-- Or should event__meta be event-meta? -->

    <div class="event-meta event-meta--title"></div>
    <div class="event-meta event-meta--date"></div>
    <div class="event-meta event-meta--location"></div>

    <!-- So now, should event__meta--title be  event-meta__title? -->
    <!-- Or maybe event__title? -->
    <!-- Or should event-meta wrap them all? -->

    <div class="event-meta">
      <div class="event__title"></div>
    </div>
    <div class="event-meta">
      <div class="event__date"></div>
    </div>
    <div class="event-meta">
      <div class="event__location"></div>
    </div>

    <!-- Should event-meta revert to event__meta now? -->
    <!-- Should event__title and friends now be event-meta__title, etc.? -->

  </li>
</ul>

处理这样的场景的惯用BEM方法是什么？

Answer 1

如何处理孙子选择器？

我看到你的问题是决定如何处理孙子选择器，这是一些人为什么首先避免使用 BEM 的常见原因。希望这篇文章能让人们更容易理解前端开发方法。

让我们通过以下示例清楚说明：

<ul class="events">
  <li class="event">
    <div class="event__meta">
      <div class="event__meta__title"></div>
      <div class="event__meta__date"></div>
      <div class="event__meta__location"></div>
    </div>
  </li>
</ul>

在这个例子中，您可以看到命名失控，最终会出现越来越多的嵌套组件。

避免多元素级别命名。

您应该在选择器名称中使用Element级别一次，记住BEM代表Block__Element - Modifier not Block__Element__Element - Modifier。

BEM命名并非严格依赖于DOM

独立于嵌套元素的深度级别，它应遵循块级别的命名约定。 BEM旨在让开发人员更容易识别不同组件及其顶级组件Block之间的关系。

这就是说，前面的例子看起来像这样：

<ul class="events">
  <li class="event">
    <div class="event__meta">
      <div class="event__title"></div>
      <div class="event__date"></div>
      <div class="event__location"></div>
    </div>
  </li>
</ul>

最后一个例子：

JSFIDDLE DEMO

CODE SNIPPET

＆＃13;

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.main-content {
  border-top: 20px solid #7B1FA2;
  background-color: #9C27B0;
  padding: 2em 1em;
}
.events {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.event {
  background: #fafafa;
  border-radius: 2px;
  margin: 2em 1em;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: box-shadow 0.3s cubic-bezier(.25, .8, .25, 1);
}
.event:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.event--is-first {
  order: -1;
}
.event__meta {
  padding: 2em;
  font-family: 'Copse', serif;
}
.event__title,
.event__date,
.event__location {
  margin: 0.5em 0;
}
.event__title {
  font-size: 2em;
}
.event__title--big {
  font-size: 3em;
}
.event__date {
  font-size: 1.2em;
}
.event__date--underlined {
  text-decoration: underline;
}
.event__location {
  font-size: 1.5em;
}
.event__location--right {
  text-align: right;
}

＆＃13;

<div class="main-content">
  <ul class="events">
    <li class="event">
      <div class="event__meta">
        <div class="event__title">
          Festival of life and death traditions
        </div>
        <div class="event__date">
          From October 30th to November 2nd
        </div>
        <div class="event__location">
          Cancún, México
        </div>
      </div>
    </li>
    <li class="event">
      <div class="event__meta">
        <div class="event__title event__title--big">
          Sacred Mayan Journey
        </div>
        <div class="event__date event__date--underlined">
          May 22nd and 23rd
        </div>
        <div class="event__location event__location--right">
          Cancún, México
        </div>
      </div>
    </li>
    <li class="event event--is-first">
      <div class="event__meta">
        <div class="event__title">
          Ran out of names
        </div>
        <div class="event__date">
          August 13, 2016
        </div>
        <div class="event__location">
          Hermosillo, México
        </div>
      </div>
    </li>
  </ul>

</div>

＆＃13;

更多信息：

Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them

More Transparent UI Code with Namespaces

事件

Xcaret

惯用的CSS BEM嵌套

1 个答案: