BEM styles in sass - how to do it right?

Question

Sass

I write this code in SASS

.main-header
  &__navigation-items
    padding: 0
    margin: 0
    list-style: none
  &__navigation-item
    padding: 10px
    margin: 0
    display: inline-block
    text-transform: uppercase
    a
      text-decoration: none
      color: $text-color
    &--active
      padding: 10px
      margin: 0
      display: inline-block
      text-transform: uppercase
      a
        text-decoration: none
        color: $main-color

It's normal to write like this, but how is it a lot of the same code?

Answer 1

In general, BEM assumes the almost complete absence of a cascade. Those. instead of a selector .main-header__navigation-item a, there should be one .main-header__navigation-link.

Answer 2

then for
do not apply styles
padding: 10px
margin: 0
display: inline-block
text-transform: uppercase
https://codepen.io/anon/pen/PrKwxJ