How to name elements when using block modifier in BEM?

Question

HTML

Good day everyone!
BEM is a new person, so every now and then questions arise. Today appeared this:
For example, I have a menu

nav.menu
    a.menu__element(href="#") Пункт 1
    a.menu__element(href="#") Пункт 2
    a.menu__element(href="#") Пункт 3

It is located in the header, in the footer, and somewhere else (it doesn't matter) and has stylistic differences in different places, for example, the color of the background and text

How do I style the block and element correctly? Create a modifier for each child element:

nav.menu.menu_theme_red
    a.menu__element(href="#").menu__element_color_white Пункт 1
    a.menu__element(href="#").menu__element_color_white Пункт 2
    a.menu__element(href="#").menu__element_color_white Пункт 3

Or will it be enough to set a modifier for the block, and in the styles of the modifier to set changes for the elements?

nav.menu.menu_theme_red
    a.menu__element(href="#") Пункт 1
    a.menu__element(href="#") Пункт 2
    a.menu__element(href="#") Пункт 3

.menu_theme_red
    background: #f00
.menu_theme_red > .menu__element
    color: #fff

Thank you!

Answer 1

It will be correct to modify or mix each element. Use nesting only as a last resort when there are no other options. If you use css variables that are set in the parent, then in this case you can do without modifiers for elements, you can also inherit the color and font from the parent so as not to set unnecessary modifiers.