Formatting your CSS properly

Most web designers have their own way of writing and they stick to it no more what. But the more diverse your projects are, the more you need to evaluate how you write your CSS. Since I work directly with developers(.NET, PHP, Python, Java) I took a step further trying to standardize my CSS formatting as much as possible based on a few things I know developers do.

01. Multiple Files

@import url("reset.css");
@import url("master.css");
@import url("color.css");
@import url("layout.css");
@import url("typography.css");
@import url("orangish_theme.css");

I think that single files are most suitable for small projects no more than one page. When working on big projects, dividing your CSS files in multiple different files can help you tremendously specially if you intend to change colors periodically, have more control over typography and layout. For example, I wanted to be able to change color theme on my site as easy as possible so multiple files was the way to go. In this case, I have separated my structure, reset, master, typography and color css files so anytime I need to apply a different color theme all I need to do is add css declaration to my screen style sheet and that’s it. Very sweet!

02. Commenting

a:link, a:visited {
color: rgb(64,65,30);
}
a:hover {text-decoration: none;}

I’ve been commenting my CSS quite a bit as I start to write a lot of ie6 “workarounds”, browsers differences etc. Since IE6 plays a very important role in my work, the more I comment, the best it becomes for developers to understand why I did that a certain way. Commenting is a common habit between developers due to complexity of the code.

03. Indentation

ul#nav {float: right; width: 414px; height: 42px; margin-right: 10px}
ul#nav li {height: 42px; background: url(../images/nav_bg.png) no-repeat 0px 0px;  text-indent: -999em; overflow: hidden; float: left;}
ul#nav li a {display: block; height: 42px;}

Indentation is a must-do when working with developers. Indenting your CSS is just a good as indenting your Javascript code. I learned that mostly from writing Javascript while reading DOM Scripting on my spare time. There’s a huge benefit in indenting your CSS. I tend to indent in chunks. That is to say, that children elements and sections are indented.