Web_Mukhammad
@Web_Mukhammad
frontend-разработчик

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

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

К примеру, есть два блока с социальными сетями:
<ul class="socials">
...
</ul>


CSS:
.socials {
  color: #000;
}

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

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

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

Спасибо!
  • Вопрос задан
  • 170 просмотров
Решения вопроса 3
Get-Web
@Get-Web Куратор тега HTML
Front-End Developer
Если отличия стилистические, то есть, можно предположить что в любом месте можно использовать один из двух вариантов, то лучше делать через модификатор с ключем и его значением. Например:
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
}
Ответ написан
archakov06
@archakov06
Frontend-разработчик (ReactJS)
Здравствуй. Должен быть модификатор, типа socials--white, это если ты их будешь юзать в разных вариантах, вне зависимости от того, в футере или где-то ещё. Если только в футере должны быть белыми, то правильней через футер обратиться к этому классу и задать белый цвет, нежели делать модификтор.
Ответ написан
JRK_DV
@JRK_DV
Рецепты https://codepen.io/jrkdv/full/LKLXdq
из вашей трактовки блок "socials" - это отдельная независимая единица, логично предположить, что нужен модификатор

если в футере используется всё же свой элемент "footer__socials", то тут пригодится миксин от блока "socials"
=> "socials footer__socials"
или даже так, если удобнее
=> "socials socials--white footer__socials"
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Rushelex
@Rushelex
Frontend developer
Можно написать общие стили для .socials, а цвет вынести в .socials--header и .socials--footer. Таким образом можно будет в любое время переопределить цвет иконок, не опираясь на название класса (как в случае с .socials--white)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы