Over the past year I have seen CSS coded in various ways. I started out learning what I consider to be the most common method.


body {
     background-color: #000;
     color: #fff;
}
 
#container {
     height: auto;
     width: 960px;
     margin: 0 auto;
}


If using Adobe Dreamweaver’s Source Formatting it will appear like the above. Now when I started getting into WordPress style sheets I found that some authors would code a little different.


body {background-color: #000; color: #fff;}
 
#container {height: auto; width: 960px; margin: 0 auto;}


This code writing style is a result of the WordPress coding environment. Since your probably at some time or another going to be modifying your style sheet through the WordPress Admin you won’t be able to use the Tab key in order to space your properties below your selectors. Even though this is a coding style that is a result of problem solving around the Tab key function, it also has some things I find attractive about it. This technique significantly reduces your lines of code. Since the code is being entered in a horizontal orientation you also benefit from heavy vertical scrolling. The first example I find much easier to scan through to find the desired selector.

The last thing I want to touch on is order of the properties. When I first start writing a style sheet I try to organize them but I sometimes end up breaking that order. I always try to keep related things together like dimensions, visual elements, sorting functions etc. In some of the books I read they recommend having multiple style sheets like one for appearances, fonts etc but I just don’t find that to be very efficient sometimes.

In conclusion I use a combination of these two methods. If a selector only has one property below it for example…

p {
     padding: 10px 5px;
}

I will sometimes make it one line like this

p {padding: 10px 5px;}

There is no confusion for me to find that property because it’s singular. Only thing I don’t like about making it one line is that it sticks out and is not consistent but I do like that it takes up less space. I am pretty particular and always striving to do things that make the most sense. Of course it’s going to work either way but I like to have a higher standard and good reason for doing anything.

I’d love to hear your thoughts on this, please leave a comment if you have something to contribute. Do you use the first or second example?