DEV Community 👩‍💻👨‍💻

Jack Keller
Jack Keller

Posted on

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (3)

Collapse
 
markewers profile image
Mark Ewers • Edited on

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;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jackkeller profile image
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.

Collapse
 
markewers profile image
Mark Ewers • Edited on

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.

Let's Get Hacking

Join the DEV x Linode Hackathon 2022 and use your ingenuity and creativity to build using Linode.

Join the Hackathon <-