Kai Kai - 6 months ago 71
Less Question

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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download