Как сделать по БЭМ?

Question

[Мухаммад Магомедов]

Здравствуйте.

К примеру, есть два блока с социальными сетями:

<ul class="socials">
...
</ul>

CSS:

.socials {
  color: #000;
}

У первого блока, находящийся в шапке сайта, иконки соц. сетей черного цвета.

А у второго блока, находящийся в подвале сайта они должны быть белого цвета.

Как правильно по правилам БЭМ, добавить дополнительный класс для второго блока, что бы у иконок был белый цвет в футере?
Нужно добавить модификатор или миксин. И как назвать?

Спасибо!

Comments

[Сергей delphinpro]

Миксины не должны менять внешний вид. Это задача модификатора.

Answer 1

[Виталий Першин]

Если отличия стилистические, то есть, можно предположить что в любом месте можно использовать один из двух вариантов, то лучше делать через модификатор с ключем и его значением. Например:
socials_theme_ligth
socials_theme_dark
где theme это ключ, а ligth и dark его значения, которые не могут быть использованы одновременно на одном блоке.
Для остальных изменений, которые необходимо внести только в footer мы применяем микс. К примеру нам нужна светлая тема, но в футере необходимо добавить отступ сверху или еще какие-то изменения в данном контексте. Выглядеть это может вот так:

<ul class="footer__socials  socials socials_theme_ligth">
...
</ul>

.socials {
  color: #000;
}
.socials_theme_ligth {
  color: #fff;
}
.footer__socials  {
  margin-top: 100px
}

Comments

[Мухаммад Магомедов]

Спасибо большое! А вот в моем случае, я менял значение у свойства color.
Будет ли правильно, если я напишу:
.socials_color_white
или
.socials_theme_ligth

Или здесь нет в принципе никакой разницы?

[Виталий Першин]

Мухаммад Магомедов, Разница есть, модификатор должен соответствовать своему названию, если мы пишем color то по логике там не должно быть никаких манипуляций кроме цвета, если этого достаточно, то можно использовать.
theme_ligth более абстрактное название в контексте которого можно манипулировать любыми свойствами, размерами отступами и прочим, ведь это тема и вполне возможно что в светлой теме добавляется border или фоновая картинка

[Алексей Шелементьев]

.socials_theme_ligth вообще ни разу не по БЭМ

[Виталий Першин]

Алексей, Прежде чем так заявлять, изучите документацию, хотя бы то что написано не первой странице quick-start: https://ru.bem.info/methodology/quick-start/#%D0%B...

Answer 2

[Archakov Dennis]

Здравствуй. Должен быть модификатор, типа socials--white, это если ты их будешь юзать в разных вариантах, вне зависимости от того, в футере или где-то ещё. Если только в футере должны быть белыми, то правильней через футер обратиться к этому классу и задать белый цвет, нежели делать модификтор.

Comments

[Мухаммад Магомедов]

как я знаю, модификатор по БЭМ, не пишется через "--"?

[profesor08]

Мухаммад Магомедов, можно использовать любые разделители.

[Archakov Dennis]

Мухаммад Магомедов, хз, я юзаю такой формат. Есть вроде так _

Answer 3

[ⓒⓢⓢ]

из вашей трактовки блок "socials" - это отдельная независимая единица, логично предположить, что нужен модификатор

если в футере используется всё же свой элемент "footer__socials", то тут пригодится миксин от блока "socials"
=> "socials footer__socials"
или даже так, если удобнее
=> "socials socials--white footer__socials"

Comments

[Нерон Лордов]

ваще нихера непонятно :(

Answer 4

[Алексей Шелементьев]

Можно написать общие стили для .socials, а цвет вынести в .socials--header и .socials--footer. Таким образом можно будет в любое время переопределить цвет иконок, не опираясь на название класса (как в случае с .socials--white)

Comments

[Виталий Першин]

Используя название блока как модификатор, вы косвенно привязываетесь к этому блоку, поэтому в таком случае используется микс header__socials и вешаются любые стили в контексте header