DEV Community

loading...

The techniques to help simplify CSS

Stas Melnikov
I'm telling about how CSS and HTML can make the web more user-friendly
Updated on ・3 min read

Mobile First without overrides

There is the mobile first approach dictates we should create interfaces from small (such as cell phones, watch, etc) to large devices (desktop, tv, etc).

So developers use the min-width media feature. As a result, they'll get a lot of overrides. For example, I add paddings with overriding.

I think it will become not readable when you have a lot of code. So I propose to save the idea of the mobile first approach but think about ranges of devices and add styles only when they're needed using the min-width and max-width features.

For example, I use different paddings but the ranges help to avoid overrides.

don't do this

.example {
  padding: 1rem 1.5rem;
}

@media (min-width: 481px) {
  .example {
    padding: 2rem 2.5rem;
  }
}

@media (min-width: 961px) {
  .example {
    padding: 3rem 3.5rem;
  }
}
Enter fullscreen mode Exit fullscreen mode

you can use this instead

@media (max-width: 480px) {
  .example {
    padding: 1rem 1.5rem;
  }
}

@media (min-width: 481px) and (max-width: 960px) {
  .example {
    padding: 2rem 2.5rem;
  }
}

@media (min-width: 961px) {
  .example {
    padding: 3rem 3.5rem;
  }
}
Enter fullscreen mode Exit fullscreen mode

Note Please, pay attention on Nicholas' comment. I didn't know about this bug. So you should keep this in mind.

Using shorthands as needed

Usually, developers like to use the CSS shorthand syntax. Yes, it will work. But you don't think shorthand always defines values for a few properties. For example, the background sets the value for 10 properties!

Thus that will lead to overrides of properties and difficult maintaining in the future. So just don't use the shorthand syntax, if you aren't sure that is really needed. For example, just use the background-color property to change the element's background color.

don't do this

.example {
  background: tomato;
}
Enter fullscreen mode Exit fullscreen mode

you can use this instead

.example {
  background-color: tomato;
}
Enter fullscreen mode Exit fullscreen mode

margin and padding without 0 values

A lot of time there is the practice of using the margin and padding shorthand that leads to complication of code maintaining in the future. The problem is people set 0 value when it doesn't need. For example, if they have to set top and bottom margins to 1rem they'll write padding: 1rem 0;

In this case, the 0 value will lead to you have to override it in the future. And do that every time. So you will go to overrides hell.

As a solution, I recommend using margin and padding shorthand only when you have to set values for all sides. And if you have to set value for specific sides use single margin-* and padding-* properties.

don't do this

.example {
  padding: 1rem 0;
}
Enter fullscreen mode Exit fullscreen mode

you can use this instead

.example {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

P.S.
🥇 If you want to be first who take my tips get my paid subscription on Patreon

🖐 Also I make written CSS/HTML code review so that you don't make common mistakes. If you're interested in that chat me on melnik909@ya.ru or dev.to direct.

🎁 Make a gift yourself or friends who like frontends: 👕 T-Shirt, 🎁 Stickers, 🥽 Masks, 🧩 Magnets

P.S.S. This post was written with the support of my sponsors: Ashlea Gable, Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten.

Discussion (9)

Collapse
fcalderan profile image
Fabrizio Calderan • Edited

I usually go with the first approach using variables if appliable so I don't repeat myself in the code, like so

body {
    --p: 1rem;
    padding: var(--p) calc(var(--p) + .5rem);
}

@media (min-width: 481px) {
    body { --p: 2rem; }
}

@media (min-width: 961px) {
    body { --p: 3rem; }
}

Enter fullscreen mode Exit fullscreen mode

What is the benefit of using more conditions in the mediaqueries? Could you elaborate more?
For my habits I find the second snippet a bit less readable.

Collapse
alohci profile image
Nicholas Stimpson

For your first piece of advice, how do you recommend dealing with the problem identified in What to do about sub-pixel media-queries? ?

Collapse
melnik909 profile image
Stas Melnikov Author

I checked the demo from the article but I can't repeat the bug. Did you succeed?

Collapse
alohci profile image
Nicholas Stimpson • Edited

Yes I did. Furthermore, the media queries specification itself describes the problem in Example 17. It suggests using range context queries instead, which would sort of work given that Firefox is where the problem manifests itself, and Firefox is the one browser that currently supports range context queries. But that would mean defining every such media query twice, once for Firefox and once for Blink/Webkit browsers, which is not a happy recipe.

Thread Thread
melnik909 profile image
Stas Melnikov Author

Thank you

Collapse
alaindet profile image
Alain D'Ettorre • Edited

If you're using SASS, you can even do this

.example {
  padding: 1rem 1.5rem;

  @media (min-width: 481px) {
    padding: 2rem 2.5rem;
  }

  @media (min-width: 961px) {
    padding: 3rem 3.5rem;
  }
}
Enter fullscreen mode Exit fullscreen mode

The best part is not repeating the selector and clearly specifying that anything more than mobile is secondary.

Collapse
afif profile image
Temani Afif

for the padding, we can now rely on padding-inline or padding-block to set both top/bottom and left/right at once

Collapse
ripcorddesign profile image
ripcorddesign

Great idea, for margins too! Careful, maybe not quite ready for production yet as they’re unsupported by Microsoft Edge.

Collapse
hedanielld profile image
Hubert Daniell • Edited

Go easy on me. I created this mixin for my scss template. It can be edited anyway but basically it takes whatever you set for desktop and divides the padding in half and a quarter depending on your breakpoint sets.

This could be edited to do what you want to do without even thinking about the smaller screens. set one and let the mixin do the rest. It is a little overkill but I use it all the time

codepen.io/hedanielld/pen/xaJYQp

P.S. this is my first post and I'm always reluctant to post.