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

Question

[Лев Александров]

Есть шапка. Содержимое в ней (ссылки навигации, 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
Здесь создаем много модификаторов, которые вряд ли где-то еще пригодятся.

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

Comments

[Сергей delphinpro]

Это неправильно

.header--dark .nav__link { color: #000; }
.header--light .nav__link { color: #fff; }

Но можно так

.nav--dark .nav__link { color: #000; }
.nav--light .nav__link { color: #fff; }

Допускается вложенность на один уровень в пределах блока.

[Лев Александров]

Сергей delphinpro, спасибо большое!

Answer 1

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

Никаких вложенных селекторов, если этого можно избежать, поэтому либо .nav__link--light/.nav__link--dark,
либо использовать css переменные:

Comments

[Лев Александров]

Эх, жаль.
А про метод с CSS переменными не знал. Спасибо!

[Лев Александров]

Виталий, а если при скролле через js я добавляю шапке класс fixed и она становится фиксированной position: fixed. И по дизайну фиксированная шапка темная. Тогда как справится без вложенных селекторов? Только через CSS переменные?

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

Лев Александров, Вы можете использовать вложенность, если не можете по другому, но в целом css переменные идеально подходят для смены темы.

[Лев Александров]

Виталий Першин, благодарю за ответ