Classes are one of the most powerful CSS selectors, but they tend to be somewhat misunderstood by beginners. Often classes are the only selector some developers know, aside from the basic element, id, and descendant options, and tend to be overused as a result.

Simply put, classes are best used for multiple, non-sequential exceptions to presentational stylesheet rules on a page. That non-sequential part is important: if you’re interested in changing the appearance of every second element in a particular context (for example, selecting every other row in a table to create a zebra-stripe visual effect) then nth-child selectors are a far more effective solution. And if you’re only interested in changing a single instance of an element on any page, an id or attribute selector is likely to be more appropriate.

The exception part is also important: it’s common for beginners to find themselves using the same class over and over again for elements on a page. At some point, it’s more likely that they are creating a rule with classes, rather than an exception, and need to rethink the entire approach of their stylesheet.

What might be an appropriate use of a class? Let’s take the principle of good design through consistent spacing: in most pages where you want text text to wrap around to the right or left of an image with a vertical “gutter”. At the same time, you’ll want to ensure that nothing is floating beside the image, to avoid the “float stack quirk”.

We could do this by adding the appropriate CSS to the inline style of every image:

<p><img src="blue-mountain-shoreline.jpg" 
alt="Photograph of shoreline near Blue Mountain, Ontario" 
style="float: right; clear: right; margin-left: 2rem;">
See more photos by <a href="//flickr.com/photos/dexxus">Paul Bica</a> 
licensed under Creative Commons
</p>

While this works, it’s extremely repetitive. That repetition creates opportunities for mistakes or changing your mind, both of which are detrimental to a consistent design. Instead, we’ll leave the properties and values that are totally unique to the image inline, and externalize commonalities to a class.

Our classes will be given logical names:

img.left {
	float: left;
	clear: left;
	margin-right: 2rem;
}
img.right {
	float: right;
	clear: right;
	margin-left: 2rem;
}

Removing the redundant CSS and applying this to our image will result in:

<p><img src="blue-mountain-shoreline.jpg” 
alt="Photograph of shoreline near Blue Mountain, Ontario” class="right">
See more photos by <a href="//flickr.com/photos/dexxus">Paul Bica</a> 
licensed for use under Creative Commons
</p>

The use of classes allows the stylesheet to be far more effective while making the design much more consistent.

You’ll note that I’ve prefixed each CSS class selector with the element it will be applied to. The advantage of this approach that it makes reading the selector obvious: you can instantly see how and where the class is applied.  The downside is that very same specificity makes it impossible for the class to be used in any other context in your site: trying to float a table with <table class="right"> would not work, as the class is locked to images.

It is sometimes better to make CSS classes “generic” by not prepending anything to the selector:

.left {
	float: left;
	clear: left;
	margin-right: 2rem;
}
.right {
	float: right;
	clear: right;
	margin-left: 2rem;
}

This makes the class much more versatile, with a small loss of comprehension. You should offset this loss by commenting your CSS.

The Power Of Combined Classes

Classes also have a unique combinatorial option: that is, you can use multiple classes on an element to create merged appearance rules. This feature is often used in Object-Oriented CSS techniques such a SMACSS, where the appearance of elements is atomized into different classes that can be conjoined together to create a variety of thematically consistent designs.

For example, let’s create a series of CSS classes for an imaginary site:

.round5px { 
	border-radius: 5px;
}
.greygradient {
	background: linear-gradient(rgb(199,199,206),
		rgb(0,0,0));
	}
.redgradient {
	background: linear-gradient(rgb(199,0,0),
		rgb(0,0,0));
	}
.borderstandard {
	border: 2px solid black;
}

By declaring these different classes, we can combine them in multiple ways in elements:

<figure> element with a black border and a grey gradient background:

<figure class="borderstandard greygradient">…</figure>

div with a black curved border:

<div class="borderstandard round5px">…</div>

Another <div> with a grey gradient background and radiused black border:

<div class="borderstandard redgradient round5px">…</div>

If you want to reference an element with multiple CSS classes, you can do so by using a series of class selectors with no spaces:

div.borderstandard.redgradient { }

Approached with careful planning, these CSS techniques can be used to make an extremely powerful “pattern library” of CSS “swatches” that you can apply to your site to create consistent, powerful and easily adaptable designs.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.