Tips for Coding Better CSS - Part I

Open source design communities and Wordpress theme sites are wonderful because they offer you the ability to dive in head first and see what’s going on behind the scenes of a design… and without costing you a dime. I love to see how other people code their CSS, and I’m always picking apart themes just to see what I can learn from them.

It’s amazing actually, the differences in the way people approach the task of structuring their CSS. After a while, you begin to get a sense of who really knows what they’re doing, and who has a good grasp, but needs a nudge in the right direction. On that note, I’d like to share with you a few things I’ve learned, which help me stay consistent when working with CSS. I’ll start with some optimization tips, and move on to cover ideas for organization (in Part II). Stay tuned. :)

Ditch that measurement

From time to time, I see themes which have a measurement attached to values of zero in the stylesheet. For example:

It’s actually unnecessary, as no measurement can really be attached to zero, because well, it’s zero! This may seem insignificant, but if you have an extensive stylesheet, shaving the pixels/ems/percentages (or whatever measurement you choose) off your declarations with zero values can save precious bytes when it comes to file size.

Work the cascade

You may have heard of the terms divitis (or classitis), and it’s a poor coding habit that befalls many beginners. Along that vein, I’ve seen several themes where styles were added via extra divs or classes, but the same effect the designer was trying for could’ve been accomplished just by using element declarations within the cascade.

The use of too many divs clutters up code, increases file size, and affects semantic markup in an adverse way. There are times when extra hooks just can’t be avoided, but whenever you can, try to use the natural cascade of your XHMTL documents. Here’s a brief example of an extra hook:

< div id="content">
< h2 class="title">Title< /div>

Using the cascade, it would look like this:

< div id="content">
< h2>Title< /div>

Though the class of title still carries meaning, it isn’t necessary. Using the cascade instead means lighter CSS, and lighter HTML. Fore more on the cascade, here’s an excellent article.

Keep it short

I love CSS shorthand. Not only because it reduces files size, but it’s less to type! Border, color, background, font, margin and padding styles can all be condensed into shorthand. Most seasoned designers are aware of this, but for you beginners, it’s definitely something to run with. So for example, rather than coding:

margin-left: 5px;
With shorthand, you can simply code:

The order goes clockwise, but an easy way to remember is by using TRouBLe as an acronym of sorts - or Top, Right, Bottom, Left. Shorthand can even be taken a step further if you have repeating values. So if you want a top and bottom margin of 10px, and a left and right margin of 5px, you can code:

If your margin on all sides is 10px, simplify it even more with:

Cool huh? Ok you get the idea now.

Go global

Another well known and yet underused tactic for swiftly setting page styles is by using a global selector. You can “zero out” any default browser settings for margin and padding, which will inadvertently affect your design, with one simple rule:

This global rule seriously reduces code bloat by saving you from repeating margin/padding settings all the way down the cascade. The asterisk functions as a wildcard, and any declarations set forth under it will be applied to everything, so be careful adding anything to this. ;)

That concludes Part I of this tutorial series. If you enjoyed this article feel free to comment with any optimization tips of your own, and I hope you’ll check back soon for Part II!

Tags: code | css | theme-development