Tip: Using Firefox to Wage a Class War
Firefox has a number of Add-Ons. The one especially loved by web developers, the Web Developer Toolbar add-on, gives you the tools to wage a class war.
What is a class war? I'm talking about a war on classitis
, a disease characterized by using classes for just about everything on a page of HTML.
Sadly, a lot of students come out of web design courses having mastered the ability to create dozens of classes in a CSS stylesheet and to apply them liberally to their HTML documents. I say sadly because most of these classes are unnecessary and merely clutter up the code and add to the document size. A bigger document size translates to a slower download and increased bandwidth expenses. Cluttered code afflicted with classitis is not good for business, it's not a best practice, and it doesn't help achieve the accessibility goal of separating content from presentation.
Are classes a bad thing in and of themselves? No, absolutely not. Putting classes in code when there is no need to do things that way is what I'm talking about.
Using the Web Developer Toolbar in Firefox to analyze your web pages, you can find classitis and zap it.
The Use of the Descendant Selector
Descendant selectors are one weapon of war that will eliminate the need for so many classes in the code. Some real life examples will help explain that. I appreciate the offer of these two example pages from friends in the online wise-women.org community.
Let me add the disclaimer that both of these sites are older examples from two designers who have improved in their abiities. Like many of us (myself included) they still have sites on the web that haven't been revised in a while and have become good examples of the classitis problem.
Case in Point: Miss B's Graphics
The first is missbgraphics.com, which you see at the left. This is a site that offers free web site graphics. It has some graphics for sale, too.
Take a look at it with the Web Developer Toolbar installed in Firefox. I have screen shots in the following material, if you don't have Firefox at hand now.
Start with the Information menu and select Display ID & Class Details. Seeing the ID and Class details will tell me two pieces of information I need to get rid of some of the classes.
First, I'll find the names of any IDs that may be in use in the HTML. Second, I'll see where the classes have been applied. With this tool selected, I look again at the Miss B's Graphics page and see some interesting things.
Here's one section of the page in a close-up.
See the yellow boxes? Those are put there by the Web Developer tool, and give the names of ID and Classes used on this particular section of the page.
Right away you notice that there's a class called
.p2
that's being used over and over. As a matter of fact, it's being used for every single paragraph in this division of the page. That means, each time a paragraph is inserted in the HTML, the code is <p class="p2"> instead of the simpler, cleaner, and more accessible <p>.
How do you heal this classic case of classitis? Look to the parent from which the .p2 class is descended. You can see it in this screen shot, too: #colleft. It is one of three ID's listed near the top of the image, but it isn't entirely clear which one is the parent container for the paragraphs in question.
The Web Developer Toolbar has another tool, again in the Information menu, that will clear up any confusion about which elements descend from which.
That menu option is Display Element Information. With that tool toggled on, you can learn all sorts of things about the elements on any HTML page. I toggle it on, just to be completely sure that I've identified the correct parent element.
I put the cursor over one of those paragraphs with the class .p2 applied. You can see where the cursor is–the element is outlined in red.
I am provided an array of element information about that paragraph, again in a yellow box. This box is much bigger than the little ID & Class label, however.
Look especially at the list of Ancestors. This paragraph is descended from: html, body, div#container, div#content, and div#colleft.
The nearest ancestor, and the one that makes the most sense to use to create a descendant selector that will eliminate the need for the class called .p2 is #colleft.
What exactly is the class .p2 doing? Examining the CSS for this page is easy to do by using the CSS menu on the Web Developer Toolbar.
If I select Edit CSS from that menu, I can not only see the CSS in a sidebar beside the page, I can edit it on the fly if I want.
I find this CSS rule:
.p2 {margin:0 8px 10px; text-align:left;}
The class is applied to every HTML paragraph like this:
<p class="p2">.
I'm not convinced the text-align: left is necessary, but I'll ignore that for the moment. The rule sets up a margin for the paragraphs in the
#colleft
div. I propose replacing that CSS class rule with a rule using a descendant selector.
The new selector is #colleft p. This selector will style every paragraph in the #colleft div, which is exactly what the redundant class attributes in the paragraphs in that div are doing now.
Here's how it would look in the CSS:
#colleft p
{margin:0 8px 10px; text-align:left;}
This is what you would see in the HTML:
<p>.
The result is that one CSS rule replaced numerous class attributes in the code. No need for classes. Just write your paragraph and you're done. This change achieves the goals of more lightweight HTML code, faster downloading, less bandwidth, and better separation of content from presentation.
Choosing an Appropriate Element for a Class
The second weapon in the war on classitis is to choose the most appropriate place to apply a class when you do need to use one. After all, classes exist for a reason. It is perfectly valid and acceptable to use classes. The point is to use them appropriately–not to excess.
Case in Point: Synapse, Literature and Medicine Newsletter
Synapse is a table-based site, but it's progressive enough to use CSS and have a case of classitis. It's a good example because a lot of people making the transition from tables to CSS layout learned to use CSS for parts of the presentation while still relying on tables for layout. There are many such sites on the internet. Once a site is completed and posted, it's next to impossible to convince a client to spend money bringing a site they've already paid for up to current standards, so sites like this example linger.
To be totally honest, I could have picked on of my own older sites for this example, but it feels too much like shameless self promotion to send traffic to my own sites for an exercise like this.
The Web Developer tools reveal quite a few classes on the Synapse site that I could examine. I first zoom in on the sidebar at the left. One example will be adequate to make the point. Look at the class used several times called .greenside.
The CSS rule for the class is:
.greenside {font-family : Verdana, Arial, sans-serif; font-size:8pt; color: #003399}
Note: This part of the style rule
font-family : Verdana, Arial, sans-serif;
should be in the rule for the body element. It is repeated in the stylesheet about 30 times. One mention of the font-family in the rule for the body element would have done the same thing.
Next, using View Souce, I learn that the .greenside class is applied like this :
<p class="greenside">
Any browser, by the way, allows users to view source code. It is a bit handier to find the View Source option on the Firefox Web Developer toolbar, however,
I need to find an Ancestor for the .greenside class that will enable me to eliminate the classitis.
Using the Toolbar to get the element information I see the following ancestors for .greenside:
html, body, table, tbody, tr, td, span.victoriasnamespan.
I can't pick out a div to use as the ancestor for our descendant selector, because the page is in a table. The most logical ancestor to use is the table cell holding the paragraphs, or the
td
element.
The best thing to do here, in my view, is keep the class but apply it only once to the td. The CSS rule, minus the unnecessary mention of font-family, remains the same:
.greenside {font-size:8pt; color: #003399}
It would be applied in the HTML to only one element, like this:
<td class="greenside">
Any paragraphs descended from the <td class="greenside"> part of the HTML would be coded simply <p>. The class is still there, but it isn't littering up the landscape by being repeated again and again; it is used once in the most appropriate spot to do the job and the HTML gets cleaned up in the process.
The result is that one judicious application of a class attribute can replace numerous class attributes in the HTML. This change achieves the goals of more lightweight HTML code, faster downloading, less bandwidth.
Conclusions
It turns out that family relationships between ancestors and descendants are as important in CSS as they are in real life. Understanding the power to select decendant elements to minimize both your CSS and your HTML pays off in lighter document weight, less bandwidth required to serve up pages, and faster downloading. Maintaining the pages becomes easier, too. Using the Firefox add-on Web Developer Toolbar to examine pages can help show you the way to achieve these goals.
Technorati Tags: web design, accessibility, usability, CSS, education, web design education, web standards
