Top 5 CSS Mistakes That You Do - Fix Them Now
Here are 5 CSS mistakes that you must stop doing in order to improve your CSS.
Weight of the selectors
The first problem that I see a lot is that people don't understand the weight of selectors. Here is the example.
<ul id="navigation">
<li>
<a href="">Home</a>
<a href="">Contact</a>
</li>
</ul>
ul#navigation li a {
color: red;
}
Here we have a navigation with links inside. But actually this CSS is not the best one. But it might be that it was written previously.
So as a good developer you want to do it correctly and you add a class to the link.
<a href="" class="link">Contact</a>
.link {
color: blue;
}
As you can see our color was not overridden.
The weight of all previous selectors are bigger that our new weight.
One class selector weight less than tag, id and 2 nested tags. And actually in internet you can easily find the weight of selectors. But learning them and using them correctly is a difficult task. Which brings us to the second problem.
Structure of your CSS
People are not trying to organize their CSS. The whole CSS is global and all your classes, ids and tags are also global. Which actually means that you must structure it somehow.
And there are different methodologies that you can use in order to organize your CSS. Let's change our first example to make it easier to support.
<ul class="navigation">
<li class="navigation__element">
<a href="" class="navigation__link">Home</a>
<a href="" class="navigation__link">Contact</a>
</li>
</ul>
.navigation__link {
color: blue;
}
Here we used a methodology which is called BEM. We try to create reusable blocks of markup with child elements inside. Here we created a block navigation with child elements element and link.
BEM makes sure that our global CSS is structured without any libraries.
So with BEM we just write flat CSS without any nesting.
If you are using frontend framework like for example React, Angular or Vue then you are getting isolated styles directly in your components and you don't need to think about it. But you still need to think about nice naming so it is clear for everybody who read your component.
Relying on framework
The next problem that I see is that people are relying on CSS frameworks too much. Typically you will have there some predefined classes like card, user, modal and so on.
If you need to change something you always override it with important. Typically it is not customized enough even with theming.
This is why when we are talking about CSS frameworks I'm a huge fan of Tailwind. Actually this is not a framework but a lot of small building block so you can write just HTML without touching CSS.
This is not a CSS framework where you get lots of existing elements and you need to override them partially. Here you just build what you need yourself.
Duplicating CSS
The next problem is really important. People duplicate CSS again and again. For example you created a button and then you need a button in another place so you copy paste styles.
Here on the left you can see just copy pasted styles with small changes. On the right we have a reusable button which we can use across the application with different states.
Make your CSS responsive
The last important problem is not building responsive CSS from the start. I know that when you just start writing CSS you don't really want to think about responsiveness and you think that you do it later. But it never happens or it is more difficult than it was from the start.
For example this form was not built as responsive. But we can easily do it responsive just by making our container responsive.
@media (max-width: 600px) {
.form-container {
width: 90%;
}
}
Now our form is fully responsive.
Want to conquer your next JavaScript interview? Download my FREE PDF - Pass Your JS Interview with Confidence and start preparing for success today!
