The Single

Organize your CSS

Several days a go I read about putting your CSS attributes on a single line, so you would have a list of selectors that you could easily scan and find what you are looking for. It would look something like this:

.nav {color:#000000; margin-left:10px; float:right;}
#mainContainer {background-color:#EEEEEE; width:140px;}
a {color:#idjfid; underline:none;}
.rightSide p {width:150px; float:left; height:200px;}

Now to me that makes seeing the different attributes really difficult. However this method is intended for really long CSS files that have 100 or so different selectors. Even organizing your CSS using the single line method, going through a 100 selectors would be a pain. That is why I never let me CSS files get that big. I use multiple files. Take Project Designs for example, I use 6 or 7 separate files for that site. I have a global file that I use for all the things that are the same on each page, like the header and navigation. Then I use a separate file for each page. This way all my files are not that large and I can easily manage them.

Comments

Probably the best and most efficient way to organize your CSS file is to use comments. I use a row of “-” along with a name to block off sections of a file, like this:

/*----------------------Navigation--------------------*/

With the use of separate files and comments it really makes managing your CSS files a lot easier, and although I do want to give single line CSS a try, I can’t see myself using it that often.


The Comments