DRY Approach to CSS Sizing for Media Queries

While working on an app recently, and possibly making the third revision on content and container spacing as well as font sizes the client was asking for, it dawned on me that we could save a fair bit of time by adjusting where we put the logic for these updates. It was so simple. How could I have overlooked this solution for so long?

The pattern below is one I'm sure we've all seen in apps and websites.

.element {
  padding: 12px;

  @media screen and (min-width: 768px) {
    padding: 16px;
  }

  @media screen and (min-width: 1024px) {
    padding: 20px;
  }
}

Of course, you can accomplish this with a preprocessor by changing your variables in a single place. That's a common pattern we all use.

$padding-sm: 12px;
$padding-md: 16px;
$padding-lg: 20px;

.element {
  padding: $padding-sm;

  @media screen and (min-width: 768px) {
    padding: $padding-md;
  }

  @media screen and (min-width: 1024px) {
    padding: $padding-lg;
  }
}

However, one approach I began to take was conditionally changing CSS variables. Because the browser does not need to call a different variable name, this is more flexible than using preprocessed variables such as -sm, -md, and -lg.

:root {
  --padding: 12px;

  @media screen and (min-width: 768px) {
    --padding: 16px;
  }

  @media screen and (min-width: 1024px) {
    --padding: 20px;
  }
}

.element {
  padding: var(--padding);
}

For common concerns like padding, margins, font-sizes, and a few others, this can reduce the need to use @media statements throughout multiple files within your app. At least for common concerns and a few advanced ones. We used this to change other things like --grid-columns: repeat(3, 1fr); for instance.

Codepen Example

Feel free to play with these techniques in your current or next project, the only real caveat is that if you must support Internet Explorer (pre Edge) you'll need to add a polyfill.

Comments

[Mark Ewers]

I see what you're doing and it's a good practice. But your first example is SCSS and the 2nd is CSS. So I wonder if the comparison is apt. Rewriting your 2nd example in SCSS seems like the right comparison to make.

$padding: 12px;

@media screen and (min-width: 768px) {
  $padding: 16px;
}

@media screen and (min-width: 1024px) {
  $padding: 20px;
}

.element {
  padding: $padding;
}

[Jack Keller]

Their both in SCSS, the second example has variables in the mix for comparison. If it was pure CSS the nesting wouldn't work as desired for the mediaqueries. I can try your example above but the nature of preprocessed variables is that they cannot generally be overwritten in such a way.

[Mark Ewers]

You are right! Not only that but I completely missed that point about no overwriting. TIL. So I'm glad I posted. And thanks for the follow up.