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‘&选择器来做

.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规则，这可能会使其他人感到困惑，将其放置在何处。