csssasslesssmacss

SMACSS\BEM - how to correctly handle icon style?

I have two nested modules: 

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

I have two separate files (I would like to keep it separate because they are reusable parts and can be used separately throughout the application) acting as modules in SMACSS terminology:
Header:

.header {
   /* header styles */
}

Icon:

.topIcon {
 /* icon styles */
}

Now I want to apply some styles to my topIcon when header has :hover state.
I can put .header:hover .topIcon inside my icon module file and apply style, however from my POV it breaks SMACSS rules.

Do you have any better suggestions?

Solution

  • I use to do it by using Sass' & selector:

    .topIcon {
  /* icon styles */

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

    The result would be 

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

    That way, I keep the icon-related styles in the icon file, but avoid "foreign" classes at a root level.

    A weak point of that way might be, that you might also have another rule for .header:hover in the header file, which might be confusing for others, where to place what.