Именование класса элементов-оболочек при использовании BEM

Я понимаю, что при использовании BEM имена классов не должны напрямую отражать структуру HTML, но как должен быть назван элемент-оболочка? Пожалуйста, игнорируйте мой конкретный синтаксис(вблизи костюм); он все еще следует за BEM, только с другим способом дифференцирования элементов.

например:

<div class="?">
  <footer class="PageFooter">
    <h4 class="PageFooter-brand>…</h4>
    <ul class="PageFooter-contactDetails">…</ul>
  </footer>
<div>

в настоящее время я бы классифицировал обертку в этом экземпляре как PageFooterWrapper, но это кажется неуклюжим, потому что обертка не независимый-он существует исключительно для PageFooter. Очевидно, что префикс все с PageFooter- - Это смешно, так что остается только рассматривать оболочку как часть PageFooter: PageFooter-wrapper. Это раздражает меня, поскольку есть подразумеваемое предложение, применяемое этим.

Итак, каким должен быть класс обертки?

9
bem css naming-conventions nested wrapper

2 ответов

то, как я всегда обращался с ним, - это обертка всегда должна быть блоком так:

<div class="PageFooter">
  <footer class="PageFooter-inner">
    <h4 class="PageFooter-brand">...</h4>
    <ul class="PageFooter-contactDetails">...</ul>
  </footer>
</div>

на Bблокировки содержит Elements так вместо того, чтобы что-то вокруг моего Bзамок я просто следовал вместе с Eпринцип lement и начал использовать inner's вместо контейнеров

16

Я на самом деле успешно применяются два класса, мой шаблон выглядит следующим образом:

<div class='page-section bem-block'>
    <div class='bem-block__element'>
        <!-- etc etc -->
    </div>
</div>

эффективно используя служебный класс для выполнения определенных функций оболочки. УСБ вероятно, будет похож на этот:

.page-section {
    width: 100%;
}
@media screen and (min-width: 1200px) {
    margin: 0 auto;
    width: 1200px;
}

Я нашел это хорошо работает на практике. Это также было бы возможно для .bem-block и это современники, чтобы наследовать от .page-section.

это решение дополняет решение Дэна Гэмбла.

5