Comments on: The CSS Best Practices to Follow and the Bad Habits to Avoid

By: Jaime

Jaime — Mon, 17 Feb 2014 07:43:36 +0000

In reply to Dharmesh Dev. Great article, but I also have doubts about the underscore section. I use to use the underscore, and I never had problems about it.

By: Justin Beaudry

Justin Beaudry — Sat, 15 Feb 2014 20:43:09 +0000

Also Chris Coyier has some a great article on css-tricks.com that demonstrates the CSS value weight of say ID’s versus Classes, etc. http://css-tricks.com/specifics-on-css-specificity/

It is recommended that ID’s not be used to style as their weight value is higher than a Class. However, ID’s are useful in HTML for Javascript interaction.

By: Justin Beaudry

Justin Beaudry — Sat, 15 Feb 2014 20:37:14 +0000

Using underscores versus hyphens is a stylistic choice. Every project should have a style guide to demonstrate how this project represents its class names, etc. In my projects I use hyphens but that doesn’t make it ‘bad practice’ to use underscores.

As well, if you’re looking into frameworks like normalize.css why not use something like twitters bootstrap? The default classes provided can be customized to fit your project needs and it abstracts a lot of the difficult ‘up and running’ cases in CSS.

As far as minifying your CSS is concerned there are some great tools in node that simplify this process and can even be set to ‘watch’ your CSS as you change files to minify your css. There are other payed tools that do this is as well such as ‘Codekit’, but node is free and fairly simple if you follow the example CLI.

I also highly recommend looking at SASS or LESS for preprocessing your css with mixins and variables.

By: Veronika Dullova

Veronika Dullova — Sat, 15 Feb 2014 17:07:22 +0000

Good summary, especially for beginners. Didn´t know about hex vs. color name thing.

Re: “Mixing Tag Names with ID or Class Name”, I am guilty of keeping tag names sometimes (with a, p or span tags mostly I think), because when I read the file (sometimes after longer time period when I wasn´t working on the project) and see p#container instead of just #container, it helps me to skim the file quicker.

By: krnl

krnl — Thu, 13 Feb 2014 14:31:32 +0000

What does that thing with the “break after dot” mean? How would that be useful? I’ve never seen that before in anyone elses code. It looks unhealthy and makes me wanna cry. If I ever find someone who writes this in code I have to read later on, I’ll beat whatever it takes out of him. This is not maintainable. This is horrible.

Your other best practices are good best practices.

By: sascha fuchs

sascha fuchs — Tue, 11 Feb 2014 20:25:16 +0000

Sorry the most off your tips comes from the Stoneage. Today we build CSS more modularized and less static.

By: leialcanices

leialcanices — Tue, 11 Feb 2014 16:01:14 +0000

A great tutorial for beginners. I will now use reset css from now on. Nice tips Sam

By: noveland

noveland — Tue, 11 Feb 2014 15:59:11 +0000

Definitely applying this on my own projects! Thanks man for sharing! I appreciate!

By: Yhiel

Yhiel — Tue, 11 Feb 2014 15:46:58 +0000

Great tips! I will surely use these tips on my workflow. Doing this properly will get you out of trouble. Thanks.

By: Surjith

Surjith — Tue, 11 Feb 2014 13:13:16 +0000

RULE #1

Avoid using ID in CSS.

http://lmgtfy.com/?q=Avoid+using+ID+in+CSS

[Please remove misleading content]