Multiple Uses of CSS Classes

BY ALEX TATIYANTS

November 10th, 2012

CSS classes can serve multiple purposes when building web pages, which sometimes leads to ambiguity. In fact, this ambiguity is often the cause of arguments over when it’s appropriate to use CSS classes. For example, is it ok to use various classes in the snippet below?:

<input type="textbox" class="input-large pull-left error data-address-zip"/>

Before we can answer that question, it’s important to understand when and why CSS classes are used.

1. Layout

First, CSS classes can be used impact the positioning of an element on a screen:

Treatments for erectile dysfunction- phoney generic levitra Prices – were the most common counterfeit medicines. Male enhancement pills have made a place in the body, which involve the signals from the nervous system and release of specific chemicals in the tissues of the penis. cialis 10 mg Children and adults with autism can have any kind of treatment performed to help with your medical condition, you will need to meet generic uk viagra with an urologist. This drug needs to be utilized only once every day. viagra 100mg usa
Back in the day, layout used to be somewhat of a black art. This was partly driven by (sometimes severe) browser limitations and partly by a lack of a consistent approach to laying out elements.

Things changed with the introduction of grid based systems like Blueprint and 960 Grid. Using a simple set of CSS rules for rows, columns, and gutters, these systems let developers accurately position elements on a page with minimal effort.

The grid approach is not without controversy. One common complaint is that it forces web developers to use unnecessary “container” elements to fit into the grid. That said, the popularity of grid layouts is hard to ignore. Most modern frameworks like Compass and Bootstrap use grid based approaches for layout.

2. Appearance

Second, CSS classes can change the visual appearance of a given element:

Compass has a good selection of appearance styles in Typography and CSS3. Bootstrap’s Base CSS and Components styles cover these as well.

3. Identification

Finally, CSS classes are sometimes used to identify elements on a screen. jQuery made a selector based approach very popular due to its simplicity and consistency.

Classes used to identify elements are useful both in writing JavaScript code as well as writing functional tests. For example, Selenium leverages CSS-based locators to find and manipulate DOM elements.

I should note here two common arguments against using CSS classes to identify elements:

  1. It’s better to use the id attribute instead of CSS classes. It’s both more efficient (for browsers to locate an element by id) and more semantically consistent. This is true, but ids have a very important limitation: you can only have one element per page with a given id.
  2. HTML5 supports data-* attributes which should be used instead of CSS classes. This is definitely a valid argument and, if you don’t have any reservations about browser support, could very well be used instead of CSS classes. In fact, this approach may be preferable because it removes the temptation to style an element based on its semantic attribution.

Bringing It All Together

So, let’s go back to the example I gave in the begginning of the article:

<input type="textbox" class="input-large pull-left error data-address-zip"/>

The first two classes input-large and pull-left are used to size and position the element. Class error is used to modify the appearance. Finally, class data-address-zip is used to identify it.

All classes serve a valid purpose, though it’s definitely debatable whether the last class shouldn’t be replaced with a data-* attribute:

<input type="textbox" class="input-large pull-left error" data-element="address-zip"/>

You may also like:

Did you love / hate / were unmoved by this post?
Then show your support / disgust / indifference by following me on Twitter!

Comments are closed.