No margin for errors

In a recent blog post I talked about pixel perfect template and how to achieve them. The purpose of this post is to give you my tricks I developed over the years on how to be more productive and how to keep the motivation level high enough to deliver on time and with satisfying results.

For part 1, I’ll show you how I structure my CSS files to keep them tidy and be efficient in them. It’s the technique I found the most efficient for me, feel free to inspire yourself from this technique and shape it to your coding style, because no one code the same way, no technique can fit everyone.

For my templating development process, I use 2 tools, the first is TextMate and is really worth the look, the built-in macros are really useful and you can program your own for tasks you have to do frequently. The second tool is the Firebug plugin for Firefox, the inspect tool make it very easy to pinpoint where those weird layout bugs come from. It gives you detailed information on the styles applied to an element and you can modify code on the fly without the need of reloading the page, making it easy to see if adding 10 pixels of margin will break the layout.

My development process is always the same. I build my layout in Firefox, make it rock solid, assuring that it wont break if a title is longer and things like that. Then I debug in older version of Firefox, Opera, Safari. Usually there’s not much to do as all these browsers have good support for standards. Then I move on to IE6/IE7, using conditional comments, I redefine specific classes to fix the layout in those browsers. The reasons why I use conditional comment is simple, keep all the dirt out of the main stylesheet! It’s also more reliable, because the “* html” hack target all versions of IE and newer version might not handle the code in the same way the hold versions did.

As for the CSS itself, I always keep the same structure in all my CSS files for all my projects. It makes my life easier when I have to do a modification on a project I did 6 months ago, since I quickly know what is where. I understand it might not be easy if you work in a big development team, but I’m sure that you can have a discussion with the other developers to find the best way to develop you CSS files, not only will it make everyone work faster and better together, but it could also help you get a little promotion (you saved the company money after all!).

I always have a main stylesheet from which I import all my other CSS files (except print and browser specific stylesheets of course). This stylesheet is always structured in the same way, adding/removing removing sections based on the project needs. It’s important to note that I don’t use any CSS framework or global reset CSS files as I don’t fit my coding style.

So for the structure I have:

1) Imports
This is where I import all my other CSS files. I always keep titles, buttons, menus in separate stylesheets. Mainly because it clutters the main stylesheet and makes it longer for nothing. Don’t hesitation to break down your site in multiple stylesheets, it’ll make it easier afterwards when you have to modifiy a title for example, you’ll just have to open the title stylesheet and bang, done!

2) Content redefinition
This is where I redefine browsers default behavior as I need them. If it don’t use selects or textareas in a projet I just won’t redefine them as once again it makes not only the CSS heavier, but harder to go through.

3) General Classes
This Is where I put the classes I might use frequently accross the site. For example, I nearly always have a hide class that I use across several pages, this I where I put it. Same goes for padding classes and such.

4) Shell
This is the biggest part of the CSS files. Everything layout relates goes there, from float, to widths, to font colors. When I have a something that takes up too much space, lots of lists for example, I take them out of shell to put them in their own spot in the CSS files (usually comes after shell as you’ll see)

5) Lists, popins, etc
After the shell and before the Miscellaneous content, if I have declarations that takes too much space in the shell section, I usually take them out and make section just for them.

6) Miscellaneous
This is where put clearfix or any CSS hack/fix code if I use them.

So this I my basic CSS structure, you can take a look at this example file to get a better idea.

Now comes the CSS indenting. This is really the most useful technique you can use. I alway keep my CSS indented the same way I would indent my HTML code. for example I have my header container, which is contained in my page container, I would put it this way in my CSS:

#page {
    /* code */
}
    #page #header {
        /* code */
    }

It make the CSS file much easier to read and it is also easier to see which element is the child of which. Once again you can take a look at my example CSS file.

I would say that the most important aspect is to keep your life simple, it’s obvious that you’ll lose motivation if you cannot find what’s breaking your layout. Use the good tools, and keep you code clean and tidy!

Here’s a site I did lately, you can refer to it to see how I use this method in action.

In a next post I will talk about how I slice my designs, name my images, see my layout.