Должен ли элемент в БЭМ находиться внутри блока?

У меня вопрос по БЭМ. Можно ли иметь .block__element отдельно от block в качестве родителя? Я создаю сайт с помощью WordPress, где есть много других классов из темы, компоновщика страниц и плагинов, поэтому необходимость иметь родительские block иногда делает все это немного беспорядочным. Итак, нормально ли иметь block__element отдельно, а затем стилизовать его через SCSS, или мне нужно добавить block в нижний колонтитул, чтобы сделать это правильно?

HTML

<footer id="footer">
 <div class="theme-class page-builder-class">
  <div class="footer-block__text">Some footer element text</div>
 </div>
</footer>

CSS

#footer .footer-block__text {
 color: #ffffff;
}

css bem
person Krullmizter    schedule 12.02.2019    source источник
comment
Вы должны добавить блок в нижний колонтитул, чтобы сделать это правильно.   -  person Paleo    schedule 12.02.2019

Ответы (2)


arrow_upward
1
arrow_downward

Я думаю, что во многих случаях вы можете смешивать классы БЭМ с другими. БЭМ можно смешивать с другими методологиями, с некоторым старым кодом или даже со специфическими классами среды.

Например, я смешивал методологии:

  • Вам нужно внести в блок определенные изменения, не основанные на логике. В этом случае я бы предпочел использовать служебный класс (например: .u-uppercase), который будет короче для записи и доступен для каждого блока, чем писать нелогический модификатор БЭМ (например: .title--uppercase)
  • У вас есть класс макета (распределяющий пространство на экране), который вы повторяете в нескольких блоках. В этом случае я бы предпочел использовать объектный класс OOCSS (например, .o-container), который уменьшит сложность БЭМ, чем везде писать один и тот же элемент БЭМ (например, .header__container).

Вы можете найти отличную презентацию о расширении BEM здесь: Modular CSS at Rangle .

Исходя из своего опыта, я пытался смешивать классы OOCSS (с префиксом l-) и BEM (с префиксом p-) при создании этого веб-сайта https://www.netalis.fr. Сначала это было странно, но, в конце концов, очень полезно и стабильно.

Пример с сайта netalis:

<!-- HEADER BLOCK -->
<div class="p-header p-header--hero">

    <!-- NESTED BLOCK -->
    <div class="p-menu"></div>

    <!-- OBJECT CLASS -->
    <div class="l-container">

        <!-- HEADER ELEMENT -->
        <div class="p-header__content"></div>
    </div>
</div>

Это работает, потому что эти внешние классы:

  1. Изолировано от классов БЭМ, например, нет селектора, который смешивает оба (.p-header > .l-container)
  2. Неизменяемый, утилиты/классы объектов не должны меняться со временем.

Итак, мой вопрос: Является ли ваш page-builder-class изолированным и неизменным?

person tzi    schedule 14.02.2019
comment
Я пришел к одному и тому же выводу для всех своих проектов. Я создал комбинацию БЭМ, АБЭМ, служебных классов и некоторых своих вкусностей. так что теперь у меня есть это: s-header__text (s-u)-textUpper; (s-u не является обязательным), s — это префикс для моих классов, поэтому я быстро могу увидеть их все в инспекторе, потому что я использую сайт WordPress с платной темой и компоновщиком страниц. добавляет много других классов в смесь. и теперь я могу использовать класс u- только для вещей, перед которыми нет блока, и я не хочу просто создавать случайный блок для выполнения каких-то действий с текстовым центром. Спасибо! - person Krullmizter; 14.02.2019
comment
Так что со всем этим я действительно просто сталкиваю все это вместе. CamelCase действительно помогает с читабельностью. Теперь проблема с служебными классами заключается в том, что я не должен использовать их все слишком часто, что теперь является моей привычкой... Я просто думаю, что мне нужно создать несколько Wordpress и обычных сайтов с моей версией БЭМ. - person Krullmizter; 14.02.2019

arrow_upward
3
arrow_downward

Мое мнение будет нет по двум причинам:

  • БЭМ предназначен для принудительного разделения модулей, чтобы их было легче анализировать, и чтобы свести к минимуму риск утечки стилей из одного модуля или блока в другой. Если вы смешиваете блоки БЭМ с кодом, отличным от БЭМ, вы на самом деле не делаете БЭМ.
  • Блоки разработаны тщательно и предполагают наследование от block до block__element. Не видя никакого кода, я, конечно, не могу сказать наверняка, но возможно, что стиль block__element зависит от наследования некоторых правил от block. Если разработчик библиотеки не может предположить, что все block__element имеют предка block, то нет смысла структурировать библиотеку таким образом. Например, если block определяет display:flex, а block__element имеет flex-grow:1, последнее не будет иметь никакого эффекта без родителя block. Если он получает display:flex от какого-то другого предка, опять же, вы на самом деле не выполняете БЭМ.
person nvioli    schedule 12.02.2019
comment
Хм да, это правда. Но тем не менее, использование БЭМ и SCSS позволяет мне лучше структурировать и визуализировать весь код моих дочерних тем. Но спасибо за вклад - person Krullmizter; 12.02.2019
comment
Если это помогает вам структурировать код, это здорово. Если вы можете получить макет, который ищете, без полного использования БЭМ, это нормально; Действуй. Программирование — это поиск компромиссов, но БЭМ был создан очень умными людьми, и если ваш сайт достаточно большой и ваши стили достаточно сложны, вполне возможно, что эти ярлыки рано или поздно настигнут вас. - person nvioli; 12.02.2019