Architecting CSS
By way of 456 Berea Street, I found Garrett Dimon’s honest and practical article, Architecting CSS.
As Garrett writes, every web developer needs to start thinking about the quality and organization of CSS code. The same style sheet code that produces a great-looking site can easily become more complicated and less maintainable than the old HTML tag soup and table layouts the CSS was supposed to help clean up.
The article and subsequent comments provide good discussion of the various approaches to organizing CSS. I have lately been using the following combination of techniques:
- Tag-based organization within files. I start with customizations of basic HTML elements (rules for
body,h1, etc.). Then, I add special cases for basic elements. This is followed by groups of rules increasingly specific areas of the document. Each CSS file ends up arranged roughly in order of selector specificity. - More reliance on the dependency approach, rather than redundancy — evidence of my hardcore programmer side. This approach, I believe, is great as long as the layout isn’t too complex and the XHTML and CSS structure are thoroughly planned out.
- Code division and sharing among multiple CSS files based on media type. For example,
core.css, which is included by bothprint.cssandscreen.css
For example…
For the Labrador Timber project, I had the wonderful chance to create a brand-new base of XHTML code for an entire site. I learned the effectiveness of good planning with this project. I started by creating mockup images and pure, non-styled XHTML code. This made it easy to write correct and semantic XHTML. By completely ignoring presentational concerns, it was easy to write good semantic markup that truly represented the meaning of the content (go to the Labrador Timber web site and do a view-source to see the clean code). The mockups gave me enough information to know the logical order of the content, but I didn’t think about what kind of extra markup would be necessary to achieve the actual layout.
The next step was to merge the XHTML and mockup information into CSS code. Because all of the XHTML code was complete, it was easy to write the CSS code for the common content elements (headings, paragraphs, lists, etc.). Occasionally I needed to add classes to the existing content elements; I just made sure to write meaningful class names. The only big additions to the existing XHTML were some div tags in the header/nav/footer areas to implement the layout.
Planning ahead and writing the content and logical structure first helped ensure more successful and hopefully better-organized CSS code.
August 26th, 2005 at 5:50 am
Architecting is not a real word. How are we supposed to take you seriously when you’re using made up marketing speak?
August 26th, 2005 at 9:35 am
Kevin, check the Google search results for “Architecting CSS”: you will see this phrase in use by a slew of blogs and magazine/news sites dedicated to web design and web standards. This list includes honest, professional, and well-respected blogs such as 456 Berea Street, from which I originally heard of Dimon’s article. Yes, “architecting” is not a real word, but this is a serious subject being discussed by a lot of serious people.
October 21st, 2005 at 1:49 am
Kevin,
What makes a word “real”?
Less than a century ago, “email” and “internet” weren’t “real” words. Once upon a time, “beautiful” wasn’t a “real” word.
Using “architect” as a verb is convenient, expressive, and meaningful. People may say that it’s not a “real” word, but any english speaker still knows what it means. If you ask me, that makes it plenty real.
English is as she is spoke.
October 4th, 2006 at 1:52 pm
Isaac-
You are correct insofar as language is a living, changing thing. But what’s the point of using “architecting” where “organizing” makes as much sense? Using “architect” as a verb is nothing more than a goofy trend. It doesn’t lend any useful shades of meaning, it’s awkward, and it just screams out “I think I’m smarter than you,” but really says “I can’t be bothered to use simple, clear language. Hemingway would barf up a kidney if he read this discussion.