For years, I’ve seen numerous engineers working at my clients make the same common mistakes with Cascading Stylesheets (CSS). Even the talented, experienced engineers make these mistakes despite their expertise across broad technical areas because they haven’t dedicated time to learning CSS the same way they dedicated time to learning algorithms in university.
I think CSS is perceived as an unintuitive and difficult language to work with because of these common mistakes that thwart most developers when they try to write CSS. If you can avoid these mistakes, you’ll see that CSS is actually a straightforward, easy-to-understand language that doesn’t deserve its reputation.
6 Common CSS mistakes made by Developers:
Below are the top 6 most common mistakes I’ve seen engineers make throughout my engagements.
1. Over-Qualifying Selectors:
Being overly specific when selecting elements to style is not a good practice. The following selector is perfect example of what I am talking about:
You don’t have to put ul and li in the selector syntax because all the a elements inside the #nav are inside list items, so there’s no reason for that bit of specificity.
2. Not using Shorthand properties:
Most people know about and use some shorthand, but many don’t make full use of these space-saving properties. Shorthand properties can be used to set several properties at once, in a single declaration, instead of using a separate declaration for each individual property. This can save a lot of space in your CSS file.
3. Using Redundant Properties:
I often find many developers applying the same properties to multiple selectors. For example, styling an <h4>in the header to look exactly like the<h5>in the footer. Instead of writing individual CSS for both, just combine them, with the selectors separated by (,):
4. Not Providing Fallback Fonts:
In a perfect world, every computer would always have every font you would ever want to use installed. Unfortunately, we don’t live in a perfect world.
It is very important to always use fallback fonts. This means that you should add a list of similar “backup fonts” in the font-family property. If the first font does not work, the browser will try the next one, and the next one, and so on. For example:
5. Using only one Stylesheet for Everything:
If you are working on a small project, its fine to use a single stylesheet. However, if you’re working on a large project, splitting style sheets into distinct ones is strongly suggested because it’ll be easier to manage and provide better modularity.
Different CSS files might be used for different fixes. By organizing CSS into disparate stylesheets, you’ll know immediately where to find a style you want to change.
6. Over-Using Z-index Values:
I have seen developers over-using the z-index by using high values when trying to put an element in front of the other. What if another developer needs to move another elements up? This person will have to set an even higher z-index value. Isn’t it?
I recommend using it wisely and moderately, increasing the necessary amount to achieve the desired result.
Tip: Using a preprocessor like Sass or Stylus, will help you in handling z-index layers on your application smartly.
I hope you guys like this post, if you do please share with other developers and also don’t forget to share you point of views in the comment box. Thanks
