Coding with Jesse

Context-Sensitive Class Names

July 26th, 2006

Usually when assigning class names, it's most natural to assign a different class name to each uniquely styled area of the page. Often, there are common words you'll want to use as class names in more than one spot on the page such as 'date', 'section', 'title', etc.

At first, it seems the solution is to make up unique class names like 'header-date' and 'comment-date' or 'side-section' and 'main-section.

Instead of doing this, you can just stick to using your simple 'date' and 'section' class names but refer to them in their context. For example, if your mark-up looks something like this:

<div class="side">
    <h2 class="title">Side Title</h2>
</div>

<div class="main">
    <h2 class="title">Main Title</h2>
</div>

Then you could define your CSS like so:

.side .title { font-size: 1.2em }
.main .title { font-size: 2em }

Even better, you can get rid of the unnecessary class names and just define styles onto elements within different sections of the page:

.side h2 { font-size: 1.2em }
.main h2 { font-size: 2em }

You also have the option of doing element-sensitive definitions. Perhaps an <h2> tag with a 'date' class can mean something different than an <h3> tag. Then, just do this:

h2.date { color: blue; background: white }
h3.date { color: green; background: red; }

This is pretty simple stuff, but it opens up all sorts of possibilities for keeping your HTML as clean as possible. Just be careful not to get confused (or confuse others) by using the same class name for more than one purpose.

Carnival of the Web #2

July 23rd, 2006

Welcome to the second edition of the Carnival of the Web.

To start things off, Emil Stenström at Friendly Bit brings up some good points with Current issues with Microformats.

John Oxton makes us web developers all feel a little bit better about ourselves with No I am not bloody sorry.

Rob Cherney follows up on John Oxton's post (and makes us feel even better) with A Bloody Good Developer.

Justin Palmer at EncyteMedia gives a different way of looking at design issues with Unconscious Interface Design.

Clay Mabbitt of Web Design Businesses Best Practices gives a nice guide to Pricing your web design service.

Joe Kissell at Interesting Thing of the Day gives us an introduction to Wikis.

Ohad's Internet News referees the battle of the giants with Google VS Microsoft.

Gerard at Interweb World wants to help you Perfect Your WordPress Title Tags.

George Papp at the Website Auction Hub answers the question How can I monetize my forum and start making money with it?.

Daniel Scocco of Innovation Zen outlines the top 5 trends of Marketing Under the Information Age.

And finally, Daniel Swiecki wonders what comes after Web 2.0 by asking How Much Rounder Can Corners Get?.