Make your life easier and less frustrating in 2008

1. Keep your css clean & organized. Save time.

Frustration brought by cssFor some it’s been drilled into our heads since we could barely walk and for others it’s been an uphill battle. Make an effort to get into the habit of keeping clean specific code. Start by dividing your code up into organized sections:
body, layout, general css styles (general link colours, headings & etc), layout specific styles.

Take the following into mind: 


	<div id=”column1”>
<div class=”box”><!- Box Content -></div>
</div>
 
<div id=”column2”>
<div class=”box”><!- Box Content -></div>
</div>

If for instance I wanted apply a specific link color to all links in column to with class=”at” inside a list I would do the following:

div#column2 div.box ul.submenu2 li a.at {
    [...]
}

Perhaps this example is taking it too far and something like div.box ul.submenu2 a.at would be more appropriate, but the point is the more specific you are, the better. Why?
The reason you want to be specific is to avoid clashing styles and know exactly where on the “tree” you are working. Try and get into the habit of referring to elements with their containing div class/id before them. Personally I avoid one-liners and divide everything up. Comment your sections of css code appropriately so that when your code exceeds 300+ lines of code you can easily find the part of your code that you need.

Learn about the Document Object Model which will help you grasp the concept if you haven’t already.

2.When in doubt use borders.

We’ve all been in the situation where we test our website and it’s not behaving the way we expected. This is often followed by the good old head banging and expressive hand gestures.

Apply a border to any miss-behaving elements. You’ll find there is much to be learn from the ye almighty border. If you use borders frequently I recommend creating a shortcut (depending on what program you use). I use 7+tab, 8+tab, 9+tab for coloured borders respectively with my weapon of choice.

div#column1 {
    border: 1px solid red;
    [...]
}

div#column2 {
    border: 1px solid green;
    [...]
}

Lets say for whatever reason column2 is appearing below column one and you just can’t figure out why. Turn borders on (notice the slick use of alternate colours) and ahh... The infamous double margin bug returns.

3. Test Often. Test Well.

We’ve all had that project where we simply want to do our job and couldn’t care less about the inferior non-standard compliant browsers (they know who they are). In most cases it is our job to have the websites we build work and behave in all common browsers, including IE6.

I recommend testing incrementally as you work on any given project. Not only will this help relieve any added stress towards the end of the project due to the fact that your website is indecipherable. But it will also help you reduce the number (if any) css hacks. Some developers have decided to ditch browsers such as IE6 all together in the hope to push people to newer browsers. However other developers don’t have this luxury or find it an unacceptable practice. You’ll also find it easier to learn from your mistakes if they are few (or plentiful), far and between. Rather than dealing with them all at once.

4. Develop your own base style sheet.

Find you are repeating your code on every single each project? Do you find CSS frameworks frustrating and bloated?

One of the first things we ever learn in any programming language is if you find yourself programming the same task more than once, create a function or class. These don’t exist in css however there is a simple solution. The “base stylesheet”.

Develop your own base style sheet that you understand. A base style sheet is a style sheet that includes things such as global reset / font-size / fonts / body background / wrapper / etc. Develop your own conventions for all your projects and keep them consistent. This will not only give you a head start on each project, saving you an hour or two here and there, but it will also help you easily switch from project to project without trying to figure out your base logic all over again.

5. “Professional Development”

Install a copy of your favourite feed reader or use a web app based one, such as Google Reader for instance, and subscribe to your favourite CSS related feeds. Spend 5 minutes everyday skimming through your feeds and you might just find you’ll pick up a thing or two. There are some excellent css books out there. Read reviews, read some sample chapters and pick up a copy you think you can benifit the most from. You’ll find there’s a great wealth of knowledge to be gained from these.

All in all 2008 is going to be yet another exciting year to be web developer. I encourage you to give these disciplines a shot and you’ll find yourself spending less time on trying rewrite or trying to figure out your code allowing you spend more time on other aspects of your work.

to blog