I’ve been working on a couple of CSS layouts in the past few weeks and really got into using comments full blast. I also found some more interesting uses for CSS comments, aside from the usual authoring information and section markers. Most of you are probably doing these already, but I wanted to share them, anyway.
Make A Sections TOC
In a previous post of mine, someone had mentioned using a Table Of Contents to aid in organizing your stylesheet code. Hesitant to apply it at first, I eventually figured out its benefits, and they proved quite useful. Not only do you get a summary of the contents of a specific stylesheet at a glance, you can also use it as a keyword guide for using your code editors’s Find function to jump to that section easily. That is, provided you matched the items on the TOC with the section-separator comments of your code.
/* TABLE OF CONTENTS HEADER - Site name, logo, main menu SIDEBAR - Submenu, searchbar, shortlists MAINCONTENT - Articles, search results FOOTER - Copyright */
Easy-Switch Comments
If you find yourself commenting a particular style line or declaration block often, put a set of comment delimiters at the end of that line/block. Whenever you want to comment that code out, just put a /* at the beginning to “switch off” the style, and when you want to switch it back on (de-comment it), simply remove the /* you just typed in. That way, you don’t have to type both delimiters everytime. Additionally, you can type in a description between the delimiters to remind you of the purpose of easy-switching it.
Before Switch-Off…
div#sidebar {
width: 180px;
color: #C00; /* SWITCH: paint sidebar red */
}
…And After Switch-Off
div#sidebar {
width: 180px;
/* color: #C00; /* SWITCH: paint sidebar red */
}
Label Your Hacks
Place a little note next to your workaround styles. It can be as simple as specifying the popular name of the workaround, or describing what browser bug it fixes. These labels will come in handy when you’re changing your supported browsers list, and will want to check if those hacks are still needed or not.
div.peekaboo {
height: 1%; /* holly hack */
}
Give Your Colors Friendly Names
Hex color values aren’t always easily readable, especially with non-websafe colors. Assign friendly names to your color values to assist you in identifying colors that you want to copy onto another declaration. It doesn’t matter if you don’t get the right color name, as long as you can differentiate between different color values. Heck, if “bruise blue” and “nurple purple” work, then use it.
div.earthy {
background-color: #F5F5DC; /* beige */
border: 3px solid #556B2F; /* olive green */
}
Slightly Off-Topic: For a list of 500+ colors with friendly names, check out this list by cloford.com.
Better Yet, Build A Color Table
Even before you code up your CSS, you’ll probably have a color scheme already established. So why not make a simple list of color name-value pairs? You can even arrange them according to hue and lightness for added organization. Then you’ll have a central section from which to copy all your color hex values.
/* COLOR PALETTE #FFF5EE - Seashell #FF8C00 - Dark Orange #8A360F - Burnt Sienna #C6E2FF - Sky Blue #1C86EE - Bright Blue #0000CD - Royal Blue */
The “Easy-Switch Comments” seem like a bad idea to me. Too much of a chance that you (or someone else who inherits the code) can screw up and end up commenting out the subsequent lines.
I like the idea of naming the colors, and including a color palette. Using PHP that idea can be taken a lot further: CSS Colors: Take Control Using PHP
I’ve been setting up a table of contents on each of my site’s 6 css files, as it gets to be such a pain finding things, though it’s much easier with modular stylesheets.
As far as comments go, I prefer to chuck a random character in front of the property, as it’s way simpler than CSS comments. Of course it isn’t valid and can cause problems, but it’s fast for me. It would be nice to have PHP/JS comments available, such as
//and#. That would be nice.Jon-Michael: I used to do that random-character thing, but I stopped that practice, as I oftentimes forget to take it out afterwards. :) I guess using a constant character (or even a couple of them) would help with searching for and deleting those “appendages” when you’re done. Something like ‘x-’, perhaps?
I guess the double-backslash effect was what I was going for with the easy-switch idea. Of course, the original
//and#delimiters are a lot more easy to implement.Ahh…That is pretty cool after looking at it some more. I just wish the asterisk was easier to type (without shift) :P. If I mapped a specific key or macro for /*, I’d probably comment more on my code!
Thats some pretty neat stuff.
Your tips sure are helpful. Developer comments are real important in the CSS file. The color table sure helped a lot. :)
I definitely like the idea of having a color table. That makes a lot of sense to me. I am always open to making my code easier to understand and maintian. Thanks for the additional tips. I started using a TOC a while back for larger css files and it saves me a lot of trouble. I usually add a number before each element to make it easier to scan and match up with the item.
For example, the TOC:
/* TOC
00 - Debug
01 - Browser Reset
*/
And the blocks of CSS:
/*00 - Debug
----------------------*/
div {border: 1px solid red; }
/*
01 - Browser Reset
----------------------*/
blah { blah: blah }
Hi all!!! Cool site!!!
The colour pallet/colour table is a great idea - I’d still love to be able to set these up as variables (eg companyBlue: #000066;) which could the be called into the CSS later (eg background: companyBlue;) - Maybe that’ll come up in CSS4.
As far as the TOC goes - I always use the equals sign before the style comment (eg /* =header */). The equals sign is never used in CSS code so you can run searches on the comments and not get tangled up with other stuff that might have similar names!
7Hz: Nice idea with the “=” thing!
7Hz: Nice idea, it would awesome to be able to define variables within CSS in a syntax similar to Javascript or PHP.
Like so:
var $blue = #6699CC;
var $lBlue = #99CCFF;
var $dBlue = #336699;
div.someDiv{
background-color: $blue;
}
I guess you can use PHP but that’s a bit of a pain in the ass to do all those escape sequences whenever you want to put in a variable name.
The site looks great ! Thanks for all your help ( past, present and future !)
Great ideas. surely helps a lot.
CSS “Cascading Style Sheets” Lessons
css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm