Cтили по БЭМ в sass — как правильно?

Question

[Константин]

Пишу такой код в 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

Нормально так писать, а то как то много одинакового кода?

Comments

[Константин]

вот и я о том-же хочу чтобы --active унаследовало стили __navigation-item

[SagePtr]

Лучше уж использовать @extend

Answer 1

[tema_sun]

Вообще БЭМ предполагает практически полное отсутствие каскада. Т.е. вместо селектора .main-header__navigation-item a, должен быть один .main-header__navigation-link.

Comments

[Константин]

т.е. ссылку тоже сажать на БЭМ класс и.т.д.. и забыть про каскад.
это будет рассово верно?

Answer 2

[Константин]

тогда для
.main-header__navigation-item--active
не применяться стили
padding: 10px
margin: 0
display: inline-block
text-transform: uppercase

https://codepen.io/anon/pen/PrKwxJ

Comments

[tema_sun]

Вам уже в комментах написали. Нельзя применять модификатор без указания элемента.