0

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?

Kai
  • 2,023
  • 7
  • 28
  • 49
  • 1
    what does BEM have to do with any of this? – zzzzBov Dec 12 '17 at 14:39
  • BEM is a closed to SMACSS. Some devs use BEM with SMACSS and vice versa. I believe that the same issue (you need an access to parent Block from child Block) may arise in BEM as well. – Kai Dec 12 '17 at 17:50

1 Answers1

1

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.

Sascha
  • 858
  • 1
  • 16
  • 30