CSS Quick Tip Tuesday: Good, Better, Best Coding Practice

Recently I worked on a project that involved working with code that I did not write and I have got to say, there is nothing worse than opening up a style sheet that is messy. It is like walking into a friends house when they haven't cleaned it weeks. Yuck. This experience reminded me how important it is that we as developers write tidy, well structured and well commented code.

Good coding practice doesn't just save YOU time, it saves us time when maintain YOUR beautiful site.

Here at ideaLEVER everyone on the team uses the same basic organization structure so that we save time when working on collaborative projects.

So what are some tools that you can adopt into your own coding practice that will have other developers singing your praises? Here's a couple we strictly follow:

1. Indent your code. When you open a new tag before the other is closed hit tab. And when you close said tag hit enter and make sure it is indented to the same level that the opening tag was.
   If I had a dollar for the number of times I have had to count divs and restructure code so that I could actually read it and figure out where the problem was I would be a rich girl. We try and indent each new rule based on the nested structure of the HTML markup so it is also a visual representation of what it's parents/child/sibling elements are.


2. Comment your code. Even if I wrote the page from start to finish in a month or sometimes by the end of the week I am not going to remember what that javascript function is supposed to do or which of my three containing divs ends before the footer. It takes about 30 seconds to add a one line comment and will save that over and over again in the course of a pages lifetime.


3. Maintain a Structure. Don't make your content div have six containers in side of it change the content div to a more logical name like page or wrapper. Give divs names that make sense and reuse those divs throughout your work. Three years down the road when all those projects come back for redesigns you'll be glad you did.


4. Don't use hacks. There may be six ways to do the same thing but there is also likely a couple good ways and about four bad ways. Use tried and true methods whereever possible and don't shortcut because you think it will save time. It won't. If you can't get around fixing IE, use a JavaScript browser sniffer instead.


5. Set up a mini contents section, and section off different aspects of your code. This makes it easier when scrolling through longer style sheets to find what you are looking for, and to better understand what is being declared.


6. Be Consistent. If you have noticed a theme happening here you're right: Be predicatble. Be consistent. Be methodical and logical. Most of us can follow logic ;) so you have a captive audience.


7. Make it easy to understand for the next developer who doesn't know your code as well as you.


8. Stick to one declaration per line, which just makes it so much easier to debug.

There are also MANY MANY free reources out there that help you understand your code and how to improve it. My favorite is CSS lint which is sort of like the old-school W3C Validtor, but actually explains why it's a bad declaration.

For those of you who are mindful of file size, and trying to save those miniscule bits and bytes for load time, you can always use a free CSS cleaner to organize your code at literally the touch of a button. My favorite is the Clean CSS, which outputs my CSS into a beautifull organized style sheet. Beaware of using tools like this however, selecting too many of those fancy features can strip out things you may actually need and give you headaches, which is why it is always smarter to do it right the first time.

There are so many wonderful articles out there that will help you become a better CSS genious, including our very own SiteCM Reseller how-to guide. Also see our SiteCM CSS implementation guide or more best practices here which also includes a huge list of popular articles for industry best practices.

If you ever want some tricks, tips, help, or more information about the SiteCM Reseller program, visit the, less neglected than before, SiteCM Reseller site.

Happy Coding, and Happy holidays!