Five Common CSS Mistakes

CSS is an essential tool used for styling HTML, but there are many mistakes beginner, sometimes even experienced, devs make. These mistakes are most often very simple and is usually a case of, “Well, this is how I’ve been taught/always done it”. But we aren’t so rigid to recognize when things could be done better!

Hopefully this blog will get you to identify the five of the most common issues and help you avoid them.

1. Using Absolute Units: You very rarely want to use absolute units for determining the size of assets and typography. Absolute means that the size will always be the same regardless of the device you’re viewing the website/app on. You want to use relative units which will change depending on the device and size of the device so that it fits neatly, no matter what. Which leads us on to the next point.
2. Not Making A Website Responsive: You need to have a responsive website, meaning one that will change depending on the device it’s being viewed on. A website design that works for desktop will not neccessarily work for phones or tablets. Make sure that when you’re developing your site that when it’s changing size, elements are morphing to the size in a way that is readable and navigable.
3. Not Using Shorthand Properties: There are many different properties that fall under a related umbrella property. Take padding for example. You have padding-top , padding-right , padding-bottom , and padding-left within that umbrella. Instead of using all four of them and taking up 4 separate lines, you can just use padding: 1px 2px 3px 4px , where each separate number is a direction for the padding (from left to right: top, right, bottom, left). That’s much more efficient, right? You’re saving 3 lines doing that, and it’s much cleaner to look at. There are many short-hand properties you can use to clean up your CSS (like background, margin, font, etc).
4. Color Names Instead Of Hex Values: It’s important not to just say Red or Blue (or whatever) when declaring color values. You’re basically leaving it up to the browser to determine what hex code “Blue” is and apply it. That determination may be different on different browsers, giving your website a different look than you intended. It’s much better and more reliable to find the exact hex code of the color that you want and use that, as you’ll be cutting out the middle-man and insuring that your colors are the same across all browsers.
5. Overusing Class Selectors: Using class selectors in CSS is very situational. Most of the time you don’t want to be applying styling in such a broad way. You should more often be styling by selecting by IDs instead, as that’s much more precise. If you have styling for one element which could be used for another element, you can just add the second elements ID to the first one and separate them by a comma and you’ll apply the same styling for both.

And that’s it! Hopefully this blog helps you in avoiding any of these mistakes in the future. Until next time!