A Chris posted a comment on my original post about the Times’ odd use of CSS on their new website. “I’m not a nutbag,” he says, “and this is a perfectly legit way of using CSS.” OK, so it is technically correct, but there’s no way anyone with common sense would do this.
A couple of days ago I was showing the CSS to a friend (see what a crazy social life I lead), and noticed the perfect illustration of why the Times’ implementation is very bad. In the stylesheet I noticed this declaration:
.border-f5f5f5 {
border:1px solid #f0f0f0;
}
Next to this is a comment: “Tip: Last minute request by graphic design to change f5f5f5 to f0f0f0, but XHTML mark up already in tech code.”
So, even by the launch date their CSS, which ties class names directly to the styles they implement, is falling apart. What do the developers do if “graphic design” decide that some other element on the site needs a border of colour #f5f5f5? They can’t use their literal “border-f5f5f5” style any more because that outputs a #f0f0f0 border.
In How Buildings Learn Stewart Brand says that when a building has been constructed it hasn’t been finished — it’s only just been started and the way the building is used will change it over time. The same is true of websites — unlike books or magazines its launch is only the beginning of a process, not the end. The site can and will be tweaked and updated over time to accommodate changing content and fashions.
And this is why having CSS classes that are named so literally, and tied to a single declaration, is a bad thing. Either you end up with a stylesheet whose literal class names bear no relation to their effect, as with the example above, or you have to go through the entire site and change the classes used. In which case why bother using classes and ids at all? You may as well use inline styles everywhere, thus avoiding a main benefit of decent CSS: that you can make a single change and have it reflected across the site. The Times’ developers can do this, as above, but only at the expense of their CSS bearing less and less relation to the styles it outputs over time.
Comments
Commenting is disabled on posts once they’re 30 days old.
Michael S. at 22 Feb 2007, 12:40pm. Permalink
Redefining white as black is a good example of CSS sillyness (particularly with the comment!), but I do find that this sort of problem is often very difficult to fix and avoid.
What class name would you give to a style that gave the "press release" heading a thick red border? If you call the style "press-release" you have a problem if you need to create, a media gallery section later on that should have the same style. However, if you call it "thick-red" then you have a problem if you want to change it to a thin blue border. The only change-safe approach is to call it "heading1"--but then it's not very descriptive.
Since there aren't any CSS refactoring tools, fixing the problem often involves modifying tens of files--CSS files, HTML templates, and code--with no guarantees that when you're done you've changed all the right bits.
Phil Gyford at 22 Feb 2007, 1:19pm. Permalink
Yes, sometimes this sort of thing is inevitable in isolated cases. Minimising the likelihood of it occurring is both down to the web designer creating layouts that not only look good but have some underlying logic to them, and to the coder creating markup that is both as generic as possible but also has some sense to it.
In the example you give, either the press release section should perhaps be given a more generic class or id name in the code, or else when the new section is introduced a generic name is added then -- so both the press-release class and the new generic class name will be assigned the same styles and will be useful in the future.
It's always a balancing act and in reality no one gets it right all the time. But whatever happens, avoiding names that describe their appearance ("thick-red") is a good first step.
Pete at 28 Feb 2007, 2:31pm. Permalink
You should call it press-release. If you later need to create a matching media-gallery section, then you just change the contents of the CSS file from "press-release {" to "press-release, media-gallery {"
Hope this makes sense.
Luke at 1 Mar 2007, 9:14am. Permalink
You all state fairly silly ways of doing CSS. Pete suggests that 2 styles should share the same parameters, however originally Michael S suggests that 2 completely different styles should share the same name.
Why not call them "press_release-hd" and "press_release_media-hd". Or have hereditory styles for each, such as ".press_release .hd {}" and ".media_gallery .hd" - CSS is such that the possibilities are pretty endless.
If you cant figure out how to uniquely identify parts of your sites and give them equally unique CSS, then we come back to the original arguement, why bother at all?
mtod at 13 Mar 2007, 12:04am. Permalink
Bugs like ths would usually be fixed by a global search on say, "border-f5f5f5", but someone seems to have been a bit maverik with this class.
Thanks for the heads-up.