demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Photograph of shoreline at sunset near Blue Mountain, Ontario, Canada

A Touch Of Class: Using  CSS Class Selectors Effectively

css / selectors

Estimated reading time: 4 minutes

Classes are one of the most powerful , 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.

Screenshot of an image floated right on a web page with a consistent margin
Screenshot of an image floated right on a web page using a consistent text margin

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, Canada” style="width: 320px; height: 240px; float: right; clear: right; margin-left: 2rem;">See more photos by <a href="//flickr.com/photos/dexxus">Paul Bica</a> licensed and free for use 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, Canada” style="width: 320px; height: 240px;"  class="right">See more photos by <a href="//flickr.com/photos/dexxus">Paul Bica</a> licensed and free 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.