Write Your CSS Code in Style

CSS (Cascading Style Sheet) coding is gaining a lot of popularity. And, because it is often edited you should think about writing your code with a bit of style. This will help prevent errors and typos from creeping in and make your code much easier to decipher and update anytime in the future.

I’ve started adopting a three-column layout for my CSS code. Here’s a sample styling my <p> element and a header id selector.


(Click on the image for a larger view.)

At the top of each element block I add a comment describing what this will do. For the standard XHTML elements this isn’t necessary, but it is really critical for any custom id or class selectors you create.

In the first column I list the element (in pink) then the attributes. I’m always consistent with the curly braces putting the opening one right after the element going down two lines and typing in the closing one right away, so I don’t forget it.

In the middle column I list the value, lining them all up with each other. I use spaces to do this because tabs will expand and contract on other computers making a mess of things.

In the third column I add comments describing what each item does. This has saved me hours of work. It makes quick work to track down a specific item when making minor changes. This is especially true if you are smart in your commenting. Instead of stating the obvious, describe any weirdness that may be happening or how this attribute relates to the others. I pretend that whoever will be reading this is the future has only the basic knowledge of CSS.

Follow these guidelines for some very stylish CSS code. It will make you look very professional as well as making your web programming future a lot less stressful.

Technorati :
Del.icio.us :
Ice Rocket :
Buzznet :