Simplify CSS With a Few Easy Rules

Maintaining CSS may be a real problem when developing a project.

Throughout my experience, I have discovered a few techniques that helped me tame CSS complexity instead of hating it. I hope they will be useful to you, too.

'Mobile First' Without Overrides

There is a long-established mobile-first approach, which is a cool practice that involves developing interfaces from simple screens (such as watches, smartphones, etc.) to more complex ones (desktops, TVs, etc.).

For its implementation, many developers use min-width in their media queries. As a result, they get a large number of overrides. To provide an example, I added padding with overriding.

As for the projects with the CSS consisting of a single HTML element with multiple blocks, this may lead to many strikethrough properties in devTools. There are 2 overrides in my example.

I try to avoid situations like this, so my method is to save the idea of the mobile-first approach and use the min-width and max-width properties for setting ranges. They help you add CSS whenever required.

So, I rewrite the code to add padding without overrides.

DON'T:

.example {
  padding: 1.5rem 1rem;
}

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

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

DO:

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

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

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

Using Shorthand Syntax Whenever Required

Developers usually don’t give a damn about using the shorthand syntax everywhere they can.

Yes, it seems to work, but if you look more closely, you will find out that shorthands are used to set values ​​for a group of properties. For example, the background sets the value for 10 properties at once!

This leads to unexpected property overrides, which will inevitably lead to future problems. So, my favorite tip is to use the shorthand syntax only where you really need it. Otherwise, use the full one.

For example, use the background-color instead of the background property if you only need to change the element’s background color.

DON'T:

.example {
  background: tomato;
}

DO:

.example {
  background-color: tomato;
}

Margin and Padding Without 0 Values

We always have to use margin and padding, and I often see that developers set 0 values when it doesn’t need it.

For example, if they need to set the top, bottom, and left padding, they will write padding: 1rem 0 1rem 1rem.

In the future, when they need to add the right padding, they will have to override the 0 value.

It’s the same every time. As a result, they get lots of strikethroughs in devTools, which prevent them from debugging their code.

I prefer to use the full syntax and set margin and padding only where they are required. For our previous example, I will use padding-top, padding-bottom, and padding-left.

DON'T:

.example {
  padding: 1rem 0 1rem 1rem;
}

DO:

.example {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
}

I hope this information helps someone. Thanks for reading!