Unnecessary selector bloat with grid modifiers

[fspoettel]

Using grid modifiers causes unnecessary selector bloat that quickly runs out of control if used frequently. [Gzip should solve this but I still think it is bad authoring to generate a lot of completely useless selectors for declaring margins and paddings on the grid when this can be avoided] This is caused by nesting grid__item directly under grid--modifier. One can use something like uncss to combat this, but there is quite an easy solution that needs the author to write one more line of SCSS. The modifiers should be written like this:

%grid--center{
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align:center;

}

%grid--center__item{
    text-align:left;
}

and declared like this:

header {
    @extend %grid;
    @extend %grid--full;
}

header > article {
    @extend %grid__item;
    @extend %grid--full__item;
}

[Cleecanth]

I've run into this as well, but there's a fairly simple solution (if slightly inconvenient). Only extending the %grid, %grid--,%grid__item classes once.

I personally do something like

.row{
  @extend %grid;
}
.row--narrow{
  @extend %grid--narrow;
}
.column{
  @extend %grid__item;
}
.sidebar{
  @extend %one-whole;
  @extend %desk--one-third;
}

<div class="row">
  <div class="column sidebar"></div>
</div>

This may seem kind of pointless at first glance, but you still get the power of the widths, breakpoints, and pushes without truly having the grid in your markup.