Use Comments to Organize Your CSS Design

Published February 12, 2008 by CSS Newbies.

The Paper Edit, by Detritus.

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:

/* This is a CSS Comment. */
body {
	font-size: 80%;
}

A single CSS comment can also span multiple lines, like this:

/* 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:

/* 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.

.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?

16 Responses

  1. Justin (reply)

    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. :)

  2. Rob (reply)

    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?

    1. Tiger (reply)

      Je vois que toi aussi les aliments te parlent :)En te lisant j'imaginai une catastrophe citrongalactique (mot inventé, cherchez pas trop) :) mais en voyant la photo, j'ai crié "mais elles sont pas mal du tout ces tal&erettes!tquot;Dis ? Il t'en reste ?

  3. Terrance Courtway (reply)

    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!

  4. Jenell Garrabrant (reply)

    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.

  5. Terrance Courtway (reply)

    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.

  6. quotes on lost love (reply)

    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.

  7. Peru (reply)

    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.

  8. หนัง (reply)

    Its liҝe ʏоս lеarn mу mіnd!
    Yօu аⲣρеaг tο ǥгɑѕρ ѕⲟ mucҺ aρρгоⲭіmɑtᥱⅼү
    tҺiѕ, ѕucҺ ɑѕ ʏߋᥙ աrߋtе tɦᥱ bⲟοқ іn іt ߋг ѕⲟmеtɦing.
    Ι fееⅼ tһаt ʏοᥙ simⲣlу cоᥙⅼԀ ԁо ᴡіtҺ ɑ
    fеᴡ p.c. tо рοաег tһе meѕѕaɡe hоmᥱ a bіt, ƅսt instеɑԁ оf tɦɑt, tһіѕ іs eҳcеⅼlеnt Ьⅼօց.
    Α fantɑѕtіϲ геаⅾ.
    I ѡіlⅼ сегtainlу
    ƅе bаск.

  9. kshasha (reply)

    This is Dinah once again at the xbox year membership coffee shop as well as Media club and also I’ve simply been taken part in dynamic intellectual discussion concerning the Pokemon tale as well as opportunities for the future.

Leave a Reply to how do I sign up to Hotmail Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>