Как правильно делать БЭМ модификаторы?

Есть шапка. Содержимое в ней (ссылки навигации, SVG иконки+логотип) может быть разного цвета: либо светлое либо темное.
Как правильно делать модификаторы?
Создать 2 модификатора header--light и header--dark и от них отталкиваться c помощью CSS селекторов вот так:
.header--dark .nav__link { color: #000; }
.header--light .nav__link { color: #fff; }
Это читается даже понятно: если шапкак темная, то для ссылок навигаций которые ВНУТРИ это шапки делаем темный цвет (и по аналогии для светлой шапки).
Или для каждого элемента внутри шапки создавать отдельные модификаторы?
Типо .nav__link--light/.nav__link--dark или .socials__link--dark/.socials__link--light
Здесь создаем много модификаторов, которые вряд ли где-то еще пригодятся.

Приведите, пожалуйста, пример правильной разметки и стилей для шапки из скринов (по БЭМу)

61ebe046572c1799390354.png
61ebe04bd670d379194363.png
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
Get-Web
@Get-Web
Front-End Developer
Никаких вложенных селекторов, если этого можно избежать, поэтому либо .nav__link--light/.nav__link--dark,
либо использовать css переменные:
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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