Updated version is available (click)! 🔥

Again and again one reads CSS tips and what one must consider in order to create fancy websites as fast as possible. Sometimes it helps to see the bad examples to know what is really good. And exactly these CSS No-Gos you can find here!

Important: The following No-Gos are only my personal opinion for "bad" CSS. These are not fixed rules, but only tips from my own experience!

1. Style-Resets

Each HTML element has some default styles, which should make the element unique. This also determines the application area or purpose of the element. Therefore you should use these default styles and not reset them. Using the example of the p tag the problem can be explained well.

/* No-Go */

/* Default Style */
p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

/* Wrong: Our custom Style */
p {
  display: inline-block;
  margin: 0;
}

We would overwrite the default display and margin attribute. Here a span element is more suitable, because it has no styles by default.

It would be better this way:

/* Correct: Our custom Style */
span {
  display: inline-block;
  margin: 0;
}

Of course we have to adapt and sometimes overwrite styles for many elements, because otherwise they would not match the CD (Corporate Design) and each page would look identical. But you can pay a little attention to it. This saves CSS code and therefore important seconds when loading the page.

Here you can find a list with the default styles for all HTML tags.

2. Unsuitable class names

This No-Go is very important if you want other developers to customize the code. Similar to well chosen comments, class names are an important step for readable code.

On this point, we must distinguish between three errors.

2.1 Too short - meaningless

If class names are too short, they are usually meaningless. What can we do with f? Right: nothing! Therefore always choose a meaningful class name and try to use as many helper classes as possible. You should not do it that way:

/* No-Go */

.f {
  color: red;
}
.a {
  margin: 1rem 3rem 2rem 3rem;
}
.cf {
  display: none;
}

This is what meaningful helper classes would look like:

.red-color {
  color: red;
}
.margin-small-big {
  margin: 1rem 3rem 2rem 3rem;
}
.display-none {
  display: none;
}

2.2 Identical to HTML tag

These class names are understandable but completely superfluous. We can already select HTML elements by the element name section or span and don't need an additional class with the same name. The following is a No-Go:

/* No-Go */

section.section {
  min-height: 80vh;
}
span.span {
  color: red;
  font-size: 12px;
}

That would be better:

section {
  min-height: 80vh;
}
span {
  color: red;
  font-size: 12px;
}

2.3 Confusing

Confusing class names are the worst. If I read no-margin in the code, I also assume that the margin is set to zero in CSS. Also with color-red everyone assumes that the background color or font color is set to red. It should not look like this:

/* No-Go */

p.color-red {
  color: green;
}
.no-margin {
  margin: 3rem 0.5rem;
}

Class names that don't confuse could look like this:

p.color-green {
  color: green;
}
.margin-big-small {
  margin: 3rem 0.5rem;
}

3. Important Keyword

We all know it: A style that can't be changed because it's often overwritten or comes from a plugin. Then we like to use the little magic word !important in our CSS.

It causes this style to always apply and the problem is supposedly fixed. But this is the beginning of a vicious circle. The next time you want to change it and are too lazy to search again, you use the keyword again and sometime there will be complete chaos.

Therefore you should always think and search well before using the keyword. Sometimes it is unavoidable, but more often it can be solved differently.

That's why I don't want to do this:

/* No-Go */

span.foobar {
  color: red!important;
  margin-top: 4rem!important;
  font-size: 12px!important;
  border-bottom: 1px solid #000!important;
}

4. Empty selectors

Of all CSS No-Gos this is probably the least important, but at the same time also the No-Go, which can be avoided most easily.

We're talking about empty selectors. In other words, selectors that do not contain any attributes. These selectors always lose a few bytes of memory.

If this often occurs in the code and we have a lot of large CSS files, it can affect the loading time of your page.

That's why nothing like that got lost in CSS:

/* No-Go */

p { }
span { }
.no-margin { }
footer { }
footer > a { }

5. Overwriting Styles

We've already talked about the key word "!important". This allows us to overwrite styles so that this CSS rule always applies. If we use this too often we have big problems with later changes. But even without the keyword we should avoid overwriting for the most part.

You should avoid that:

/* No-Go*/

p {
  font-size: 2em;
  color: #FFF;
}

/* ..other code.. */

p {
  font-size: 2.2em;
  line-height: 20px;
}

/* ..other code.. */

p {
  font-size: 1.8em;
}

But you can easily avoid this mistake. Instead of always adding a new style, you can simply search for an occurrence in your CSS files for CTRL + F and change it accordingly.

This saves us code, thus storage space and the file also remains clearer.

It could look like this:

p {
  font-size: 1.8em;
}

6. Too much absolute positioning

I love absolute positioning. It can be really helpful in many cases and is also unavoidable and good in some cases.

However, there are actually still people who position each element absolutely. There are many reasons why you shouldn't do that. On the one hand it is much more difficult to position each element pixel by pixel. A lot of paperwork, a lot of trial and error and it looks unclean.

It is also much more difficult to make a page responsive and you have to insert a lot of breakpoints to make the page look good at any resolution. Why make your life harder than it is…? But as I said: there are also a lot of good applications for absolute positioning.

7. Too much CSS

A problem which I see e.g. with prefabricated WordPress themes. You already have a lot of CSS code (also a lot of unnecessary code) and then you even add your own code. So the chaos is complete.

This is where many of the listed No-Gos grab. Overrides, empty selectors, frequent use of "!important" and above all: confusing! Therefore you should directly remove or rewrite all code that is not needed or that you change.

But also for other projects you should write minimal code. It makes many things easier and minimalism is now modern and beautiful.

Conclusion

So there are many points you can consider to write clear and performant CSS. You never stop learning and you can always improve your "code". I also know that you can't always avoid these CSS No-Gos, but you can always try to improve yourself.

Please check this out if you are looking for JavaScript Challenges (sorry for the little ad):

Thanks for reading! If you liked this article, please let me know and share it! If you want to you can check out my blog and follow me on twitter! 😊