CODEWITHSUNDEEP
csscoding-stylesmacss
clifdensprit
clifdensprit

Reputation: 4901

How do you handle layout specific changes to modules in SMACSS?

If you have a module that requires a minor change for every instance according to which part of the layout it is in how do you handle that using SMACSS?

As I can see it I have two options, and neither seem right.

  1. Create a Sub-Module/Modifier
    • The problem I see with this is that this sub-module will only be used once and these will start building up as the project grows.
  2. Nest the module class in the layout class
    • Problems: Increased specificity, dirties the code a bit by putting module styling in with the layout classes or vice versa.

Most of the information I have found on SMACSS is based on over-simplified situations so it's not that helpful once you get into real-life code.

Here's a specific example:

I have a module .nav and a sub-class .nav-hor for horizontally laid out navigation. .nav-hor needs to switch to a toggle nav(slides open when button clicked) when it gets too small. This is controlled by media queries. But the issue here is that the correct breakpoint will depend upon the size of it's parent container. So the media query's breakpoint will most likely be different for every instance.

.nav { /*...*/ }
.nav-hor { /*...*/ }
@media screen and (min-width: 30rem) { /* This dimension is variable according to the size of the parent container */
  .nav-hor {
    /* Convert to toggle nav */
  }
}

Upvotes: 0

Views: 250

Answers (1)

Evgeniy
Evgeniy

Reputation: 2921

On my practice best way to use sub class as modifier.

Actually it doesn't matter how important your change. Any change should be applied with same convention.

Use STATE is not good idea, as this rule created for reflection module current status, its very close for JS manipulation or setting some initial state( hidden, closed, expanded, animated, pending and so on)

Use child and descendant also not best way as you create tight coupled deps with module context. There is also good trick - you u can dispense child, nested and descendant replacing it with sub class - use sub class.

Quickly about naming - nav-header may be too special, you may try to replace it with something more abstract, like nav-horizontal, nav-inline. You can combine sub-clsses to reach result you need and keep ability to reuse subclasses in other context

So in your case sub-class is the best opinion

Upvotes: 0

Related Questions