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.