in

ASP.NET Weblogs

Jason Clark's Blog

Software, Hardware, whatever...

CSS Architecture - Standards?

I've been doing some research on CSS Architecture/Standards, and have come up rather dry.   After spending a few hours hammering google with various keywords etc I can't find a single entity publishing any guidelines/standards for CSS development.  What I mean by that is CSS architecture as it pertains to the UI development, not the standards of the specification.  For example, is it best to use ID declarations for objects, or classes, etc.   Has anyone seen anything or read anything that talks about UI architecture using CSS? 

Comments

 

James Summerlin said:

This is interesting as the slashdotters et al are hammering away at the IE Blog for them to implement CSS standards.

James
April 28, 2005 11:05 AM
 

Scott Galloway said:

There's a few books - one I linke is Designing with Web Standards by Jeffrey Zeldman http://www.amazon.com/exec/obidos/ASIN/0735712018
Covers pretty much everything you need to know - and is a huge advocate of structural XHTML / CSS for UI development...
April 28, 2005 11:12 AM
 

Charles Chen said:

There is no such thing as "standards" when it comes to CSS usage.

Just as you will get 10 different opinions on how to design an object oriented system, you will get 10 different opinions on how to design your CSS from 10 different people.

Some people will tell you to use tableless layouts and claim that anything else is a perversion of HTML. Others will say why go through the trouble of emulating table-like behavior with DIVs when tables work perfectly fine, are much more efficient in terms of dev time, and behave nicer for certain tasks.

It's all a matter of pragmatics, which is dependent on what your values are on the project you're working on.

To me, using CSS effectively is an art form. Mastery comes from a deep understanding of browsers, HTML, DOM, and lots of experience with what works and what does not.

The key is to be consistent and come up with a "philosophy" that is appropriate for the project you are working on; using CSS effectively takes time contraints, compatability constraints, skill constraints, and necessity contraints into account and comes up with a balance of elegance in implementation and practicality in terms of development costs (time or $$).

Hope this helps :)
April 28, 2005 11:13 AM
 

Jason Clark said:

Appreciate the feedback. We have quite a bit of experience, what I was more looking for are some resources on other peoples design/architecture experience to validate some of our architectural decisions. I'll grab that book and give it a read.

Cheers.
April 28, 2005 11:32 AM
 

Charles Chen said:

To expand on my post:

Time constraints:
-----------------------------------
Effective use of CSS requires a lot of planning in advance and continual refactoring of your stylesheets once you dig into the actul HTML. In addition, advanced CSS techniques require a lot of research into what works on what browser, what works to fulfill standards, and what you can do to emulate behavior of certain tags (when using other tags to replace them, i.e. tableless layouts).

Compatability constraints:
-----------------------------------
Compatablity between broswers can cause CSS nightmares. While CSS is a standard, it is hardly implemented consistently across all browsers. There are many sites that have detailed tables of what works and what doesn't in the most popular broswers nowadays (try http://www.quirksmode.org and http://www.csscreator.com/attributes/). As with all endeavors in UI design, the more platforms you must support, the more time you must put into it.

Skill constraints:
-----------------------------------
If you're doing this for a client, will the full time staff be able to maintain what you develop? Do *you* have the skill and understanding necessary to come up with an elegant CSS design (by this I mean effective, clear, and understandable use of CSS)? Skill is a big factor to consider; if it'll take someone 3 hours to figure out how to add another row of content to a page, then it's not worth it to use complicated CSS to do it; it might be easier to just use some simple HTML that even a junior webmaster can understand. On the other hand, if you plan on maintaining it and you feel confident in your CSS, you should certainly persue an elegant solution.

Necessity constraints:
-----------------------------------
The other thing to consider is "is this absolutely necessary?" Will it make a difference, one way or the other, whether a UI is built using a CSS heavy implementation or utilizes CSS relatively sparingly. You always have to ask yourself whether what you're doing is necessary for the project you're on. For example, a one-off intranet application in an environment with a known browser with a handful of HTML pages as the UI most likely does not need a CSS heavy implementation. On the other hand, a high-traffic, publicly visible website would benefit from a CSS heavy implementation (due to caching along the network) and, with the right investment in time, you would be able to come up with a nice, cross-browser set of styles.

April 28, 2005 11:41 AM