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 */
}

这样，我在图标文件中保留了与图标相关的样式，但是避免＆＃34;外来＆＃34;根级别的课程。

这种方式的一个弱点可能是，您可能还有.header的另一个规则：悬停在头文件中，这可能会让其他人感到困惑，在哪里放置什么。

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

1 个答案: