css - SMACSS\BEM - 如何正确处理图标样式？

Question

我有两个嵌套模块:

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

我有两个单独的文件(我想将它们分开，因为它们是可重用的部分，可以在整个应用程序中单独使用)作为 SMACSS 术语中的模块:
header :

.header {
   /* header styles */
}

图标:

.topIcon {
 /* icon styles */
} 

现在，当 header 具有 :hover 状态时，我想将一些样式应用于我的 topIcon。
我可以将 .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 设置了另一条规则，这可能会让其他人感到困惑，不知道该把什么放在哪里。