Remove CSS Comments – Automagically!

Estimated reading time: 2 minutes, 22 seconds

Dreamweaver CSS comments

I’ve shared this info via email and Twitter, but have yet to blog about it, so here goes:

First, I LOVE using and finding comments in HTML and CSS markup. Since 1993, I’ve learned almost all that I know about web development by viewing source and then later inspecting elements of other peoples pages. While the detective work required by uncommented code proved a great teacher, those comments proved a great time-saver. Not to mention the fact that they’re critical in a multi-user work environment. Nevertheless, there can definitely be too much of a good thing.

Anyone who’s used Adobe Dreamweaver’s  built-in boilerplate New Document templates has surely found the HTML and CSS comments—especially in their CSS files—to be rather, um,  verbose. I once posted my opinion on an Adobe user forum and suggested that there needed to be a simple Preferences checkbox to turn these on and off. I actually received a reply by a forum ‘superuser’ who insisted that this was merely Adobe’s way of “introducing DW users to HTML markup” (and presumably the code view in as well?) to make us feel more comfortable with hand coding. I kid you not. I most certainly replied with a completely sarcastic response and probably hurt his feelings a bit in the process, but it needed to be done.

To this day, no matter how well you understand CSS, you cannot suppress those helpful /*comments*/ from appearing within your DW files—and chewing up bandwidth and increasing your page weight in the process. The obvious solution here would be to create my own boilerplate templates for various layouts and simply use those as starting points. Well, that’s a lot of work once you think about the various permutations of column layouts, headers, footers, etc. and I’m always way busy with work-work to even begin such a project. Enter stored queries.

Several hours of Googling various keyword variations and scouring the resulting sites eventually led me to David Powers’ Foundation PHP website and in particular to his blog post Stored Query to Remove CSS Comments. Bingo. Complete usage instructions are in his blog post, but the gist is this: Download and save his css_comment_remover_v3.dwr file to your desktop (for easy access). Then, with your heavily commented CSS file open, click CTRL-F/CMD-F, click the ‘Load Query’ button and select his stored query, then click ‘Replace All.’ Done.

Two things I should note:

  1. This stored query works with any CSS file using the standard /*comment*/ tags.
  2. THIS WILL REMOVE ALL OF YOUR CSS COMMENTS.

So, obviously, do this once at the beginning and then go back and add your own comments where necessary and continue to do so along the way.

CSS comments are good.
CSS Comments are necessary.
CSS Comments are no place for entire HTML/CSS tutorials.

Thanks for listening.

This entry was posted in Observations, Technicalities. Bookmark the permalink.
  • rac0on

    Thanks mate. That is exactly what I was looking for. The linked web site describes the procedure well. This will save me a lot of time not having to delete comments manually. Of course, when you publish a site, it’s more professional not to have Dreamweaver’s comments like that (just in case someone looks at the code). And yes, it saves on the size of the HTML file.

  • Art Thompson, Jr.

    Hey, rac0on. Glad you found this as useful as I did. Of course, it’s always best to start with your own baseline boilerplate templates that only contain the code and comments you need. But there’s nothing wrong with using Adobe’s default templates–especially for quick and dirty sites. Unfortunately, all that extra comment data ends up being nothing more than wasted bandwidth.

  • GB

    this is a Godsend of a post!! Bless your Soul!