Superclasses

February 12, 2010

Write less CSS and build in consistency using the Java principle of the superclass.

There’s a concept in Java that I realized I was already using when I write my CSS for a particular project. It’s known as a superclass.

Take a circle for instance. What is the nature of a circle? It’s a shape. Shape would be the superclass of circle. Circle would be the subclass of shape. This is basically the idea of going from something general to something increasingly specific.

Let’s say I’m working on a site that has multiple listings of property types, like golf courses, hotels and resorts, all mixed together in a search results type situation.

I could write my HTML like so:

1. <div id="results">
2. <div class="course listing">...</div>
3. <div class="hotel listing">...</div>
4. <div class="resort listing">...</div>
5. </div>

The .listing class would be like a superclass.

1. .listing {
2. margin: 1em 0;
3. padding: 1em;
4. border: 1px solid #eee;
5. font-family: georgia, times, serif;
6. background: url("../graphics/bkg_product_listings.gif") repeat-x;
7. }

Since I know each listing is going to have a common set of declarations, I like to roll those up in one generic class. Then for each specific kind of listing, I’ll write the declarations separately. Only declarations that are unique for that type will be applied to that class.

1. .course {
2. color: #360
3. background: url("../graphics/bkg_course.gif") repeat-x;
4. }

1. .hotel {
2. color: #666;
3. background: #666 url("../graphics/bkg_hotel.gif") repeat-x;
4. }

1. .resort {
2. color: #333;
3. background: #999 url("../graphics/bkg_resort.gif") repeat-x;
4. }

This allows me to avoid duplicating the declarations like so:

1. .course {
2. margin: 1em 0;
3. padding: 1em;
4. border: 1px solid #eee;
5. font-family: georgia, times, serif;
6. color: #360
7. background: url("../graphics/bkg_course.gif") repeat-x;
8. }

1. .hotel {
2. margin: 1em 0;
3. padding: 1em;
4. border: 1px solid #eee;
5. font-family: georgia, times, serif;
6. color: #666;
7. background: url("../graphics/bkg_hotel.gif") repeat-x;
8. }

1. .resort {
2. margin: 1em 0;
3. padding: 1em;
4. border: 1px solid #eee;
5. font-family: georgia, times, serif;
6. color: #333;
7. background: url("../graphics/bkg_resort.gif") repeat-x;
8. }

Of course, if I want each listing to have slightly different padding, or a different kind of border, then it makes sense to write them separately. But if I want consistency, it doesn’t make sense to have all this duplicate CSS, especially if I want to make a change to all listings, then I have to remember to change the same CSS three times.

If I have a set of display items that seems to be similar to one another, I always try to extract what is common for those items and come up with a generic class that describes the nature of those items.

For example: .listings, .results, .icons, .subheaders

I never want to duplicate my CSS declarations over and over, and if I find myself doing that, I know I need to step back and rethink what I have so far. Thinking abstractly will lead to better written CSS that is leaner and easier to add to in the future.