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

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

0 голосов
/ 12 февраля 2019

У меня вопрос по поводу БЭМ.Можно ли иметь .block__element отдельно с block в качестве родителя?Я создаю сайт с помощью WordPress, где есть множество других классов из темы, компоновщика страниц и плагинов, поэтому необходимость иметь родительские block s иногда делает все это немного беспорядочным.Так что тогда нормально, если у вас есть 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;
}

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

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

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

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

Вы можете найти отличную презентацию о расширении BEM здесь: Модульный CSS в 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 изолирован и неизменен?

0 голосов
/ 12 февраля 2019

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

  • БЭМ разработан для обеспечения разделения модулей, чтобы их было легче рассуждать, и чтобы минимизировать рискстилей, вытекающих из одного модуля или блока в другой.Если вы смешиваете блоки БЭМ с кодом, отличным от БЭМ, вы на самом деле не делаете БЭМ.
  • Блоки спроектированы тщательно и предполагают наследование от block до block__element.Не видя никакого кода, я, конечно, не могу сказать наверняка, но возможно, что стиль block__element зависит от наследования некоторых правил от block.Если разработчик библиотеки не может предположить, что все block__element имеют предка block, то нет никакой выгоды в структурировании библиотеки таким образом.Например, если block определяет display:flex, а block__element имеет flex-grow:1, последний не будет иметь эффекта без block родителя.Если он получает display:flex от какого-то другого предка, опять же, вы на самом деле не делаете БЭМ.
...