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

/* !GENERAL STYLES
———————————————————————- */

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.

DisclaimerIf there is ever any doubt, the views expressed here have nothing to do with those of my employer. read more

Even though I work for Target Corp, the views expressed here are my personal views and do not necessarily reflect the thoughts, opinions, intentions, plans or strategies of my employer.

And some legalalize:

All of my online communications are provided “as is” with no warranties or indemnities of any kind, and do not confer any rights. My employer is not responsible for the accuracy of any of my online communications.

You should know that I have no ability to bind my employer to any legal obligations. By way of example, I have no authority to grant or confer any right or license, either express, implied or by estoppel, under any patent, copyright, trade secret or other rights of my employer. If you would like a license to any intellectual property or other rights of my employer, you must enter into a written contract directly with it.

comments powered by Disqus