Borloz.com

Everyone has their own way to organize their stylesheets, whether it means using creative indention, separating styles into different sheets according to their function, or any one of 1,000 other ways to keep your sanity when working on a large project. I make use of several of these techniques, but lately, I’ve been using one in particular that has helped me out a lot as my stylesheets keep growing. I guarantee it will be one of the simplest, but also most helpful tricks you’ll use.

Basically, like many others, I use comments to signify the start of each section - but with a twist. For instance, I might have something like this:

/** Home page
**********************************/
	some styles...

/** About page
**********************************/
	some more styles...

/** Signup page
**********************************/
	even more styles...

Take note that the start of the comment has the forward slash, followed by an asterisk, just like a standard comment, but also includes an additional asterisk. That single extra asterisk separates the section comments from regular comments and is what’s going to make your life a lot easier. Here’s how:

Let’s say you have a stylesheet that’s 600 lines long. Instead of scrolling through, looking for the section you want to edit, you can just do a “find” in your editor for “/**” and then jump a section at at time by clicking “next”.

You could even take it a step further and use “/***” for major sections and “/**” for sub-sections. Or, if you prefer, you could use “/*/” as the start of your comments. It really doesn’t matter as long as whatever you choose starts with “/*” because anything after that is treated as comment text.