Semantic naming conventions for HTML and CSS
With the widespread adoption of web standards it's becoming harder and harder to stay an elitist web design snob. When everyone out there knows their CSS inheritence from their specificity, how do you maintain an air of self superiority over "lesser" designers?
Well, worry no more because there are still a few areas of semantic development where it's possible to outshine the majority. Case in point is the correct use of semantic naming conventions in your markup.
I'm assuming everybody is familiar with correct use of semantics when writing HTML. Headings should be correctly marked up with H1, H2 tags, navigation should be placed inside lists and so on, but the quest for semantically marked up sites doesn't stop there.
Take the following examples of a standard page template. Forget the CSS or the <div> content for now and concentrate on the naming conventions used for the <div> ids:
<div id="wrap">
<div id="top">
</div>
<div id="left">
</div>
<div id="right">
</div>
<div id="bottom">
</div>
</div>
Example B
<div id="wrap">
<div id="branding">
</div>
<div id="navigation">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
Which is better?. If you said A then you're wrong. Not only are you wrong but you're a bad person too. Well not exactly, but it's important to realise how best to decide on naming conventions for your classes and ids.
If we take the Example A, where the "content <div>" are named top, right, left and bottom. Now assume the site navigation sits inside the <div id="left">, and initially this is floated over the left hand side using CSS.
Now imagin at a later date we wish to redesign our website. The power of CSS allows us to do this without even having to touch the HTML template. So we decide to move the navigation over to the right hand side of the page. Do you see the problem? The id for this <div> is still left, but it now sits on the right hand side of the page. Similarly there's no reason why the content should always sit over to the right, or indeed that the branding must stay at the top. If we were to change the visual position of the <div>s it would lead to confusion and we'd probably ultimately have to go back to our template and change the id names.
The second example is much better because it identifies the <div>s semantically, in that it actually describes their content instead of their appearance or position on the screen. In this case it doesn't matter where the navigation, content or branding sits on the page, because the ids describe the content and not the presentation. We can move things about till our hearts are content and the naming will still make sense to anyone studying our code.
Looking at the next example, it should be pretty clear how it could be improved:
<h1>This week's special offers</h1>
<p>50% of everything this week.</p>
</div>
The following would be much more suitable:
<h1>This week's special offers</h1>
<p>50% of everything this week.</p>
</div>
At this point you may well be thinking that this level of semantic detail is veering towards the anally retentive, and I might agree, however when working on large sites, that may change drastically over time, you'll want to future proof your naming conventions as best you can.
I'm as guilty of this as anyone (view source and see for yourself), but there are big advantages to semantic naming, and all it takes is a little care and attention when creating page templates. If you do, you'll find your websites much easier to manage in the long term, and short term you'll be able to lord it up over the rest of the unsemantic rabble too. Bonus!