It’s inevitable: the longer you work with CSS, the longer your CSS files will grow. And the longer your files get, the tougher it will be to find what you’re looking for when you go back to edit your website’s styles later on down the road. This is where CSS comments can really come in handy.
The syntax is amazingly simple: You start a CSS comment with /* and end them with */ – like so:
1 2 3 4 | /* This is a CSS Comment. */ body { font-size: 80%; } |
A single CSS comment can also span multiple lines, like this:
1 2 3 4 5 6 7 8 | /* This CSS was written by Rob. He thinks of it as his own child, so you'd be best off asking permission to use it. ;) */ body { font-size: 80%; } |
So what are CSS comments good for? Well, in addition to identifying the creator of a CSS file (as shown above), you can also use your comments to keep your CSS more organized. For example, I use comments to organize my CSS into sections, like this:
1 2 3 4 5 6 7 8 9 | /* Top navigational elements. */ ul#topnav { property: value; } /* Main content area. */ #content { property: value; } |
This makes it much easier to come back though and add or remove values from a stylesheet later on.
I also use comments to identify any “hacking” I’ve been forced to do.
1 2 3 | .column { height: 1%; /* Makes IE behave itself. */ } |
That way, if the hack ever becomes unnecessary or causes a different problem down the line, it’s that much easier to find it.
What else do you use CSS comments for?
On February 12, 2008
12:45PM
Justin said:
I’ve seen stylesheets with a big comment at the top that summarizes all the colors used therein — the hex code, a human-readable description, and a blurb about which parts of the site use it.
This makes it really easy to find, for example, that the blue-green you use is #417690. It also makes it easy to do a quick search-and-replace to change your color palette.
I just need to make myself adopt the same practice. :)
On February 12, 2008
10:07PM
Rob said:
I’ve heard of that technique, too. And I agree: it’d be insanely useful, and I’m still not using it in my day-to-day work. I wonder why?
On April 01, 2010
7:51AM
SEO工具 said:
支持个！继续努力！
On October 23, 2011
4:38AM
Terrance Courtway said:
Hello would you mind sharing which blog platform you’re using? I’m planning to start my own blog soon but I’m having a hard time deciding between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design and style seems different then most blogs and I’m looking for something completely unique. P.S Apologies for being off-topic but I had to ask!
On November 09, 2011
8:13PM
Jenell Garrabrant said:
The crux of your writing while sounding reasonable initially, did not really settle perfectly with me after some time. Somewhere within the paragraphs you actually were able to make me a believer unfortunately just for a while. I nevertheless have got a problem with your leaps in logic and you would do well to fill in those breaks. If you can accomplish that, I would definitely be amazed.
On November 10, 2011
5:07AM
Terrance Courtway said:
Most of what you mention is supprisingly appropriate and it makes me ponder why I had not looked at this with this light before. This piece really did switch the light on for me as far as this specific subject matter goes. Nonetheless there is actually 1 issue I am not too comfortable with and whilst I try to reconcile that with the actual central idea of the point, let me see what all the rest of your readers have to say.Nicely done.
On February 17, 2012
5:49AM
quotes on lost love said:
An exciting speech is designer report. I anticipate that you should create much on this matter, it mightiness not be a sacred content but generally grouping are not sufficiency to verbalize on much topics. To the succeeding. Cheers like your Use Comments to Organize Your CSS Design.
On May 12, 2012
12:33AM
Peru said:
Initially vaguely intimidating, CSS is a well-designed, elegant language. It is hugely important for web design, and has been pivotal in helping designers move away from the problematic, hack-ridden days of presentational HTML tags and allowed us to return to using logical, structural elements which make our sites more accessible.