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

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

Например:

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

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

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

источник

2015-07-06 Undistraction

Почему существует необходимость в обертке вокруг

@Rob Не будь таким педантичным. Это пример для вопроса. – Undistraction

Не будучи педантичным вообще. Это техническое наблюдение со стороны, очевидно, более опытного, чем вы. Какой цели это служит? – Rob

Путь я всегда относился к ней является оболочкой всегда должен быть блок так:

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

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

источник

2015-07-06 12:09:33

Спасибо. Это имеет смысл, хотя я не думаю, что мне нравится тот факт, что оболочка теперь является элементом верхнего уровня в терминах классов. Обертка является прекрасным примером того, что может легко стать ненужным/необходимым при изменении макета, поэтому привязка его к нижнему колонтитулу, как это, мне кажется неправильным. Рассматривая его как подэлемент, его можно легко удалить без каких-либо действий. Короче говоря, вы сделали нижний колонтитул гораздо менее самодостаточным и менее портативным. – Undistraction

Если это так, то вы можете утверждать, что обертка не специфична для 'PageFooter', она специфична для контента вокруг него, поскольку она основана на расположении вещей вокруг нее.Таким образом, имеет смысл разделить их и привязать обертку к макету сайта, а не к 'PageFooter'? –

Да. Это именно то, к чему я иду. Он должен быть дочерним элементом контейнера, а не частью нижнего колонтитула. Я часто рассматриваю элемент как контейнер макета с слотами для подэлементов, поэтому я думаю, что это действительно просто вариация этого. – Undistraction

I ' ве фактически использовали два класса успешно, моя картина выглядит следующим образом:

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

Эффективно используя utility class для выполнения определенных функций оболочки. Вероятно, css будет похож на это:

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

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

Это решение дополняет компанию Dan Gamble.

источник

2015-07-16 21:09:37

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

ответ

Смежные вопросы