Каков правильный БЭМ-подход к глобальному наследованию классов?

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

Давайте посмотрим на этот пример, у меня есть простой элемент с несколькими дочерними элементами.

.b-content { width: 100%; }
.b-content__image { display: block; }
.b-content__date {  font-size: 14px; }
.b-content__title { font-size: 30px; }
.b-content__text { font-size: 16px; }

Теперь я хочу повторно использовать свой блок .b-content с немного другими стилями, поэтому я использую модификатор .m-compact, и теперь я не уверен, какой подход является правильным один (в БЭМ).

Должен ли я добавлять класс модификатора ко всем элементам (которые я считаю более правильными в соответствии с документацией):

.b-content.m-compact { width: 50%; }
.b-content__image.m-compact { display: none; }
.b-content__date.m-compact { font-size: 12px; }
.b-content__title.m-compact { font-size: 24px; }
.b-content__text.m-compact { font-size: 14px; }

или я должен добавить модификатор только к родительскому элементу:

.b-content.m-compact { width: 50%; }
.b-content.m-compact .b-content__image { display: none; }
.b-content.m-compact .b-content__date { font-size: 12px; }
.b-content.m-compact .b-content__title { font-size: 24px; }
.b-content.m-compact .b-content__text { font-size: 14px; }

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

Итак, что я должен использовать и почему?


css bem
person Madr    schedule 18.07.2016    source источник
comment
Этот вопрос либо слишком широк, либо основан на мнениях, либо требует обсуждения и поэтому не относится к теме переполнения стека. Если у вас есть конкретная, требующая ответа проблема с программированием, предоставьте полную информацию.   -  person Paulie_D    schedule 18.07.2016

Ответы (2)


arrow_upward
2
arrow_downward

Как вы указываете в последних строках своего вопроса, при выполнении БЭМ вам следует избегать каскадирования, поэтому, как следствие этого, вам не нужно повторять модификатор там, где он не нужен.

Для вашего модификатора я бы написал что-то вроде этого:

.b-content--m-compact {
  width: 50%;
}

В вашем примере Блок и Модификатор задают только ширину, так что это ограниченный вариант использования. В общем случае удобно использовать какой-либо предварительный процесс CSS для облегчения написания кода, например. в SASS:

.my-block
  width: 100%
  color: red
  &--modifier
    @extend .my-block
    border: 1px solid red

что приведет к:

.my-block, .my-block--modifier {
  width: 100%;
  color: red;
}
.my-block--modifier {
  border: 1px solid red;
}
person kaosmos    schedule 18.07.2016
comment
На самом деле модификатор устанавливает не только ширину контейнера, но и размер шрифта и отображение его дочерних элементов. В любом случае ваш пример с препроцессорами кажется решением моей проблемы, однако я не могу использовать его в своем недавнем проекте из-за других коллег и внутренних процедур компании. Итак, я начинаю понимать, что моя проблема в отсутствии препроцессоров и моей компании... - person Madr; 19.07.2016
comment
хорошо, @madr, теперь я лучше понял твою точку зрения. Ваше использование модификатора представляет собой смесь между традиционным CSS (с упором на каскадирование) и БЭМ. Вы не должны определять Element как потомка/потомка чего-то другого, а как отдельный класс. У Гарри Робертса из CSS Wizardry есть хорошая статья на эту тему: csswizardry.com/2013/01/ Надеюсь, это имеет смысл. - person kaosmos; 19.07.2016
comment
Кроме того, @madr, если вы единственный, кто пишет CSS, вы можете использовать SASS самостоятельно, даже если это не инструмент, используемый в масштабах всей компании. Я делал это в течение некоторого времени, пока мне не удалось внедрить SASS в рабочий процесс компании, я просто зафиксировал полученный CSS. - person kaosmos; 19.07.2016

arrow_upward
1
arrow_downward

Модификатор в БЭМ выглядит так: .block_modName_modValue

Можно добавить дополнительный класс - но это не БЭМ. А также у модификаторов есть название и значение.

Блокировать в пространстве имен набора БЭМ

Таким образом, вы устанавливаете стили по умолчанию для блоков и все уникальные (которые можно изменить) размещаете в css с помощью модификаторов. Таким образом, ваши стили не перепутаются.

Для этого вам нужно:

  1. Поместите общие стили в блочные стили (.portfolio)
  2. Разместите уникальный стиль (с модификаторами) следующим образом. (portfolio_theme_list)

В css вам не нужно отделять это (потребуется препроцессор).

.portfolio {
    /* common styles */

    &_theme_list {

    /* modifiers style */
    }
}

В БЭМ-проекте-заглушке (шаблонном движке) это будет выглядеть так:

Если вы добавите модификатор в block. Затем скомпилируйте (bemjson) в html.

{
    block : 'portfolio',
    mods : { theme : 'list' },
}

Вы увидите этот код

<div class="portfolio portfolio_theme_list">
</div>

Вы правильно пишете элементы и понимаете, что их нужно разделять(без наследования).

Итак, теперь вам нужно просто определить стили для вашего блока с помощью модификатора(portfolio_theme_list).

У вас есть 2 варианта:

1) Если у вас 2 разных блока - нужны отдельные общие и уникальные стили. Уникальные стили размещайте в стилях с измененными блоками.

2) Если у вас есть только 1 другой блок и у вас уже есть стили для этих блоков. Затем вы можете переопределить и не разделять общие стили (но это может вызвать боль, если вы добавите другой модификатор/экземпляр)

person Zentro    schedule 24.07.2016