Top 10 CSS Bad Practices

Developers have always wrestled with CSS for as long as I can remember.

For good reason. Developers are logical creatures. It doesn't make sense when adding a DIV element pushes everything down one line and another DIV "floats" to the left.

You've heard the disgruntled developer:

"We just need to move it five pixels to the left, and...ARRGGHHH! The whole section drops down to the next line. WHAT AM I DOING WRONG?!?!?!"

As a quick post, today, I go over my top 10 Bad Practices in CSS.

Based on my experience with CSS as a developer, here are my top 10 "Don'ts."

1. Don't Overuse Classes
   Use ID instead of classes where it makes sense. It's a faster way for the browser to access DOM elements.
   
   
2. Don't Throw Everything Into One CSS File
   Partition your CSS to make it more manageable. Each CSS file could be broken into logical components like header.css, footer.css, etc.
   
   
3. Don't Name Your Selectors ".red-with-green-dashed-lines"
   Name your selectors as to what your components are on the page. For example: "header-left," "content-title," or "content-date" is more descriptive.
   
   
4. Don't Forget Comments
   Comments are extremely important in CSS to understand how each style could relate to another and what color scheme applies to which components.
   
   
5. Don't be Afraid of Dev Tools
   Each browser now has their own set of development tools, usually by pressing F12. These tools are critical when "debugging CSS."
   
   
6. Don't be Afraid of Overrides
   Of course, CSS frameworks like Bootstrap and Foundation are massive, but each one needs a little tweaking based on your needs. When you get an update to the framework, it will overwrite your changes. Instead of digging into the huge CSS file, create a bootstrap-overrides.css file to bend the framework to your will, but just...
   
   
7. ...Don't Overuse !important
   The whole idea with CSS is that the styles "cascade" down from one to another. !important just stomps all over previous styles and says "I'm more important... forget about all of that other CSS stuff and use me!" :-)
   
   
8. Don't Use a Ton of WebFonts
   This may be something obvious, but there are people who really love their typography. Use one or two (max three) WebFonts for your site and fall back to the browser defaults to keep your site optimized.
   
   
9. Don't Hand-code ALL of Your CSS
   For keeping your CSS DRY (Don't Repeat Yourself), use a CSS preprocessor like LESS or SASS. The biggest benefit to using these preprocessors is that you can define variables like your color scheme at the top and reuse it throughout all of your CSS instead of tracking down every color when you have to modify them.
   
   
10. Don't Let Your CSS Become "Obese"
    Spaces in a CSS file take up...umm...space. Since we all want our CSS to load extremely fast, use a CSS minifier to shrink it down before deploying to a site.

While there isn't a "CSS Best Practices," each company (or individual) has a certain culture or way of implementing CSS.

These are just some of my "Don'ts" when writing CSS as a developer.

NOTE: This was originally posted on Quora as an answer to someone wanting to know what not to do in CSS.

If you want to follow up with more CSS, check out my "prized" Collection of CSS Resources (also, try not to spend too much time on the CSS Zen Garden... it's addicting).