Skip to main content

Cascading Style Sheets Have Taken Root

Posted by eitan on May 21, 2004 at 12:01 PM PDT

There's nothing more satisfying than to see a good plant flourish. I believe CSS to be a "good plant." And it's really satisfying to see that it's taken root on the web so very well. I'm sure we all recall a time when browser support was not as good, making publishers hesitant to employ the technology on "production" sites.

Visiting various web sites, blogs, and wikis over the last couple of years, I've been delighted to see the variety in styles and the beauty of CSS shine through.
The w3c web site's own look has improved nicely over that time period. I think one site deserving mention is Atlassian's (atlassian.com) and their beautiful issue management web application, JIRA. But the cat is out of the bag and there is no lack of clear and clean content on many other sites besides. What's exciting is that many of these sites are one-man sites, people's personal place on the web. Having a beautiful site no longer requires an ant army to maintain.

But it's not just about looks. I'm getting a little ahead of myself here, but I'd wager that it's the refactoring power of CSS that is enabling more and cleaner content than we've had in the past. The days are numbered for HTML hacks such as nested tables, 1-pixel GIFs, image-bloated pages, needless repetition of style application with tags, all contributing to unmaintainable and buggy content (not to mention slow-loading pages and internet pipe clogging).

The reason I am writing about CSS on java.net is that I believe CSS is not just a tool for graphic designers. It is a core refactoring tool for content publishers (whether static or dynamic). CSS is not just about styling, it's deeper than that.

The exercise of comparing page sizes before and after applying CSS is a worthwhile one. A significant percentage of a page's markup can be weeded out and thrown in the trash. This is mainly due to duplicate and extraneous markup such as "font" tags and one-column nested tables that are used to simulate the CSS box model (margins, border, and padding). Analogous to a refactored program, the end product is content that is clearer, easier to understand, and easier to maintain.

I have personally gone through such an exercise on a relatively small site (my local JUG site) and was surprised to find out that the content of the site shrinked by approximately 25%. In my view, this is significant, because I've actually added content to the site since I began maintaining it.

Using CSS effectively involves more than just applying styles. The content must be structured in a special way. I haven't been able to articulate this up until now: the content becomes more semantic. We cannot change the html markup language but it has become flexible enough such that content publishers can now get around the issue of semantic content by applying "class" and "id" attributes to tags. What publishers end up doing is tagging a div with an id such as "sidebar." As far as I'm concerned, this is equivalent to having a tag. Suddenly combining markup with css stylesheets becomes a task more akin to writing content using a specialized markup language such as docbook. The difference of course is that the rules are completely informal; they're invented by the content developer.

Allow me to discuss another example, to better illustrate what I mean. When I developed the web client for my open source javadoc tool (ashkelon) in 2002, I ended up with class attributes having the names of java modifiers (static, public, abstract, etc..).

To give you an idea, here's a snippet of the one stylesheet that drives the entire application:

..
.static { font-weight: bold; }
.abstract { font-style: italic; }
.deprecated { text-decoration: line-through; }
..

Likewise for programming elements:

..
.ordinaryClass { color: blue; }
.interface { color: green; font-style: italic; }
.exception { color: red; }
..

Here's an example of the html markup:

    <span class="interface">java.util.List</span>

Here's another example:

    <span class="method public deprecated">getBytes(int, int, byte[], int)</span>

In the latter example, you'll notice that styles can be applied in an additive manner by simply listing them all (of course, you could end up requiring the user agent to apply cascade rules to determine which of two or more conflicting styles apply). The method signature ends up showing up with a line through it because it's deprecated.

You get the picture. So what you end up with is something similar to an informal markup language for javadocs. In fact, on my task list for this particular project is the definition of an xml schema for javadocs (for the java language, really). With such a schema, the markup becomes formal and xsl stylesheets can then be applied to transform the content based on the semantics of the markup itself, similar to the way docbook works today for publishing books and articles.

One last point: once a page has been made more semantic, more than just styles can be applied to the content. It can be more easily parsed and introspected by tools used for other purposes, such as automated testing.

So, CSS is a good plant. Looked at from the perspective I discuss above, it's enabled many informal markup languages to sprout, often without their authors (myself included) realizing it.