Being a web designer, with a possible light case of ADD, i noticed that in the past I had used a different organizational method for my css files on almost every website I built. Hell, in some cases there was no organization what-so-ever.

As is often the case when you repeat a task over and over, I got better at organizing my files to make them easier for me to build and edit. I am going to share some of my organizational tips with you here today, and hopefully they will save you some time in the long run.

1. Organize CSS by page element, not by style
2. Put similar CSS elements on the same line
3. Organize CSS in order of element layout
4. Name your CSS based on structure not design
5. Comment your CSS code

1. Organize by page element, not by style

Below is an example of one way I have seen many web designers organize their CSS files.

/* Containers */
#header-container { }
#navigation-container { }
#footer-container { }

/* Links */
#header a:link, #header a:visisted { }#navigation a:link, #navigation a:visisted { }
#footer a:link, #footer a:visisted { }

/* Fonts */
.header-text { }
.navigation-text { }
.footer-text { }

So, maybe you’re thinking to yourself, “Gee Adam, this looks alright to me”. And sure, it does look visually appealing. But when it comes time to change everything in the header, your now stuck scrolling up and down, looking for each “header” element.

Instead, try using the method below and it will ensure you won’t waste time scrolling the page up and down.

/* Header */
#header-container { }
#header a:link, #header a:visisted { }
.header-text { }

/* Navigation */
#navigation-container { }
#navigation a:link, #navigation a:visisted { }
.navigation-text { }

/* Footer */
#footer-container { }
#footer a:link, #footer a:visisted { }
.footer-text { }

2. Put Similar Elements on the Same Line

If you aren’t writing your CSS on 1 line, then you can use this next trick.

Many CSS elements are related or similar to each other, and therefore, can be organized together when we write our CSS code.
Instead of this:

#header-container {
width:800px;
height:600px;
margin:0; padding:0;
}

Try this:

#header-container {
width:800px; height:600px;
margin:0;padding:0;
}

Not only does this cut down the number of total lines in the CSS file, it also makes finding and editing related elements much much quicker.

I wish I could take credit for this tip, but alas I can not. I read this tip on a blog somewhere, sometime ago. I tried looking for the article again, but I was not able to find it. If you or someone you know wrote the article, please let me know and I will gladly give credit.

3. Organize CSS in order of element layout

This is almost so obvious it’s not worth mentioning, but unfortunately I still see CSS written without any thought to having to go back and edit it later. It is similar to when car manufaturers build a part that has to have 20 other parts removed in order to reach the part you are trying to fix.

If you are only using 1 CSS file, then for god sakes, ORGANIZE! Put your header definitions at the top of the file, and your footer definitions at the bottom of the file, everything else goes in the middle.

4. Name your CSS based on purpose not design

I, like many CSS designers out there, have been guilty of naming a CSS definitions based on their design, and not by their structure and/or purpose.

For example I would name a CSS element like this:

.text-purple {}

Instead of naming the CSS element like this:

.author-name {}

The reason for this is simple, over time when you decide purple isin’t the right color for the authors names, and you want to change the purple to yellow, your CSS definition is still named text-purple which is definitely confusing.

Sure you might think to yourself, “well i can always just remember I changed purple to yellow”, but over time, and after working on countless other websites, I can almost guarantee that you will forget the change, and especially if and when there are more than one change, you will be all but lost.

5. Comment your CSS code

Commenting is one of the most important factors when attempting to organize your CSS files effectively, and there is more than one way to use comments in a CSS file.

Section Dividers
This is one of the more standard uses of comments in CSS files. Use markup like this to label different sections of your CSS file.

/*  Header */

Explanations

This is a common use for comments in programming languages such as PHP.

/* This style definition is needed to fix a problem in IE6 */

This is by no means a complete list, but it is a list of some of my favorite CSS tips!

If you have you own tips to share, please do and if I like them, I will add them to the post giving the author link credit.