Top 10 CSS Bad Practices
Top 10 CSS Bad Practices
CSS is essential for web development; however, it's difficult to get right for your average developer, who may have interests elsewhere in the stack. Read this article to avoid needling inconsistencies and adopt best practices.
Join the DZone community and get the full member experience.Join For Free
Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.
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."
- 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.
- 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.
- 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.
- 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.
- 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."
- 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...
- ...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!" :-)
- 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.
- 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.
- 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).
Published at DZone with permission of Jonathan Danylko , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.