Jon Hartmann

Reusable CSS Design

• October 29, 2007 11:01 PM
• CSS
• Comments (0)

One of my favorite things about the web is seeing the transformation from the 'ancient', flat text of the early 90s into the slick, beautiful web designs that modern users expect. The wonders of CSS have unlocked amazing new potential for design, and created some wonderfully clean and usable site desins like Web 2.0 at http://www.openwebdesign.org/. This design is appealing, clear, and the content can really shine. Unfortunately, CSS people seem to have no idea what a pain it is to work with designs like this.

I'm working on a personal project and decided to jazz it up with the Web 2.0 template, but to my dismay, not only is the design rather chunky, you can't move anything. Put the form in the main area, and the styles go away. Put the list in the main area, the styles go away... gah.

CSS makes it very easy to apply effects universally to all elements in a design, not just one small portion, but when I browse designs like this, I often find elements of design limited to only a single div with an ID value, rather then using it to create a beautiful element for reuse. Nearly any where a designer would put a <div id="something">, I'd put a <div class="something">.

So, my note on CSS design: design elements that are reusable. If one <ul> is styled a certain way all <ul> should be styled the same, unless there is a specific need. It creates uniformity in the look, and it makes the job of poor codeslingers like me much easier.

• Print
• Send
• Digg It!