SMACSS\BEM - как правильно обрабатывать стиль иконок?

Question

У меня есть два вложенных модуля:

<div class="header">
.....
<i class="topIcon"></i>
......
</div>

У меня есть два отдельных файла (я хотел бы сохранить их отдельно, потому что они являются повторно используемыми частями и могут использоваться отдельно во всем приложении), выступая в качестве модулей в терминологии SMACSS:
Заголовок:

.header {
   /* header styles */
}

Значок:

.topIcon {
 /* icon styles */
} 

Теперь я хочу применить некоторые стили к моему topIcon когда header имеет :hover государство.
Я могу поставить .header:hover .topIcon в моем файле модуля значков и примените стиль, однако из моего POV это нарушает правила SMACSS.

У вас есть предложения получше?

Answer 1

Я использую это, используя Sass '& selector:

.topIcon {
  /* icon styles */

  .header & {
    /* modified styles when it's in header */
  }
  .header:hover & {
    /* modified styles when it's in header thats hovered */
  }
} 

Результат будет

.topIcon {
  /* icon styles */
}
.header .topIcon {
  /* modified styles when it's in header */
}
.header:hover .topIcon {
  /* modified styles when it's in header thats hovered */
}

Таким образом, я сохраняю стили, связанные с иконками, в файле значков, но избегаю "чужих" классов на корневом уровне.

Слабым местом этого пути может быть то, что у вас также может быть другое правило для.header:hover в заголовочном файле, что может сбить с толку других, где что разместить.