Search code examples
csssassneat

Grid-Media IN vs OUT

Me and a coworker went into an eternal discussion about what is the best way to use Neat Grid-Medias.

Consider the following approuch:

Approuch A:

.mydiv {
  font-size: 14px;

  @include grid-media($somegridvar) {
    font-size: 18px;
  }
}

Then, consider this:

Approuch B:

.mydiv {
  font-size: 14px;
}

@include grid-media($somegridvar) {
  .mydiv {
    font-size: 18px;
  }
}

Testing on Neat, both approuchs renders to the same result, which i will not put here because its obvious.

My question is: What do you prefer? There is a "better" approach suggested by ThoughtBot? There is a "better" approach suggested by someone? There is a reason to use one instead of other? Its just a matter of style? Someone have use both to provide an enriched life statement?

What we deduced till now:

In Approuch A, we will have several includes of Grid Media on our pages, making the code harder to read and more bloated. At the other side, all Grid Media will be centered in one single rule, and the same rule will not be repeated over the document for each Grid Media.

In Approuch B, we will have a single block of each grid-media for each breakpoint, resulting in a much shorter code, but also multiplying the places where the element classes appear.

Also, if this coworker is reading this, im looking forward to discover that my way was the better. (yes, i will not tell you which one)

Solution

  • 👋 Hi!

    I’ll preface this by saying that code style is a team thing. What works for us, may not work for you. Above all, consistency and a shared understanding is really what matters. Don’t spend too much time in the weeds, little details. That being said, we (thoughtbot) publish our code style guides and prefer this syntax (your ‘Approach A’):

    .mydiv {
  font-size: 14px;

  @include grid-media($somegridvar) {
    font-size: 18px;
  }
}

    Why? mydiv is the thing you’re styling, not the media query itself. So encompassing all styles that relate to that selector within one declaration block provides a lot of clarity. Having styles that affect the selector spread out through multiple blocks can become hard to decipher.