jim.bernatowicz

Recently I was building a new web application and found myself without a clear starting point for the styling, and we were weeks away from getting the look and feel approved by the client.

Where I work, each design is custom-made from the ground up by a creative group, and then HTML is edited to reference the tags and classes specified in the CSS. Any significant reuse or standardization in our of CSS has yet to occur.

As a result, I began looking to build up an inventory of user interface elements and class naming conventions so we would minimize styling on the fly, reduce the coupling between the technical and creative groups, and reduce the degree of HTML editing required after the CSS is provided by creative.

After working on this for a few hours, I came across the 960 Grid System which is a very easy way to layout pages. A bit later I came across this 960 Grid System Tutorial.

I also came across Dynamic Drive which has a lot of free snippets of JavaScript and CSS. Not really a framework, but a worthwhile resource for quick and dirty copy/paste solutions.

As I worked through my thoughts, I drafted an email to my team, which I never sent because by the time I got to the end I realized I should be looking for CSS frameworks and not trying to reinvent this wheel.

I include the draft email here so you can understand my motivations.

Subject: An Inventory of Reusable CSS Elements

Motivation: It is far easier to style an application when one does not need to pause at the placement of every element to think about what class should apply, or trying to anticipate the "tag soup" wrappers that may be required to implement a style robustly across all browsers. (Tag soup? I mean by this, all of those counter-intuitive tags that serve no purpose other than coaxing CSS to work consistently, such as extra spans within an anchor styled as a sliding doors button.)

Styling on the fly, or after the fact leads to inefficiencies during coding and the subsequent styling pass. Inevitably pages and the elements within are structured inconsistently, and HTML needs to be tweaked and re-tweaked as one finds the inconsistencies across the various application pages. Cross-browser support adds yet another round of tweaks and hacks to the mix.

Personally, I find styling to turn out much better, and is completed much faster when I start from a well-defined set of CSS classes and sample HTML snippets. Ideally, this would take the form of a pre-established toolbox of tested and approved elements.

Goal: Design once, apply everywhere. (My apologies to Sun/Oracle for such a shameless lift of Java's slogan!)

Allow me to elaborate. CSS allows us to separate content and its structure from its style or presentation. This means that the same content can look entirely different given a different style sheet. So when I say "Design once, apply everywhere," it does not imply that every button will be blue and have rounded corners.

The challenge is in the balance. We desire to define a framework for the developers to place the "hooks" for styling while leaving the designers room for creativity.

Allow me to illustrate with an example of poor balance between framework and creativity. Consider that we wish to style our error messages. It would be perfectly legal to establish a class called "ArialBoldRed10pt" but that gives the designers no room to maneuver without having to change the class name (or mislead future maintainers.)

Class names should identify what the element is, NOT how it looks.

Classes should also not try to do too much. If one mixes visual styling with layout, for example, you may need to create many specific classes where just a few narrowly-scoped classes would do.

So what does this mean? IMHO, to best gain efficiency and consistency of styling, we should strive to identify the elements and give them well-defined class names, provide the required tag soup, if any, and describe their use-cases, possibly by example. Then, creative can create the CSS implementing those classes as they see fit.

Once I realized I should be looking for something already built rather than reinventing the wheel, I found the following resources:

Pros and Cons of using CSS Frameworks (including links to some frameworks.)

Top 12 CSS Frameworks

As with all frameworks there are plenty of CSS frameworks out there, and even more opinions about which is best or whether they should be used at all. Now that I am back on track, I'm off to explore this solution space.