How to structure CSS classes? By entities or by aspects?

Question

I wonder what fits better into the CSS philosophy:

1. CSS classes mark entities - OR -
2. CSS classes mark aspects

For example let's take the cell for a product price sheet and a footer cell which contains the sum of all prices.

In the first case each of the cells would only have one class: product-price resp. product-price-sum (or price and the row for example has a product class) In other words: Classes identify things.

In case two the cells would have many classes, which define the properties/aspects of a product price, for example numeric and currency and an additional sum class for the footer. numeric would define the text to be right aligned, sum would mark the cell bold. In other words: Classes describe things.

I can't decide which approach is better. In the past I used a mixture of both which quickly led to an ugly pile of unstructured CSS classes with conflicting styles and some ugly !important hacks.

The first approach obviously has some redundancy, because one would have many classes (product-*) and most of them would share common CSS properties.

The second one has problems when it comes to format just one place differently, let's say the product price sum. It can be possible that there are other places which also have the exact same three classes assigned, but don't have anything to do with a product price. In that case one would have to use the surrounding HTML tags to somehow "address" the specific place in the HTML file.

Are there any rules of thumb, guidelines, proven concepts, etc on how to handle this problem?

Answer 1

I would highly recommend tagging by entity (attribute, rather than individual element), so class='product price' (2 tags), rather than class='product-price'(1 tag). If you're careful, this will result in cleaner, easier to maintain code. If you're having trouble with !important's, try drawing a tree of how the tags will be structured. This will help decide at which level of the tree to declare certain properties, and result in minimal use of !important.

Answer 2

I don't think there's any right answer, but you want to favour the approach that results in the cleanest CSS and the least duplication overall. For me personally I'd say you want something in between your two options, but closer to option two.

If I'm understanding your descriptions correctly, with option one you'd have something like this:

<table>
  <tr> 
    <td>Product A</td>
    <td class="price">£1</td>
  </tr>
  <tr>
    <td>Product B</td>
    <td class="price">£2</td>
  </tr>
  <tr>
    <td>Total</td>
    <td class="price-sum">£3</td>
  </tr>
</table>

and then the CSS:

.price {
   text-align: right;
}

.price-sum {
   text-align: right;
   font-weight: bold;
}

and option two would be more like this:

<table>
  <tr> 
    <td>Product A</td>
    <td class="numeric currency">£1</td>
  </tr>
  <tr>
    <td>Product B</td>
    <td class="numeric currency">£2</td>
  </tr>
  <tr>
    <td>Total</td>
    <td class="numeric currency sum">£3</td>
  </tr>
</table>

but why not have:

<table>
  <tr> 
    <td>Product A</td>
    <td class="price">£1</td>
  </tr>
  <tr>
    <td>Product B</td>
    <td class="price">£2</td>
  </tr>
  <tr>
    <td>Total</td>
    <td class="price sum">£3</td>
  </tr>
</table>

and:

.price {
   text-align: right;
}

.sum {
   font-weight: bold;
}

There's no point giving a cell both 'numeric' and 'currency' if all currency fields will always have both classes - better to give currency the same styles as numeric in the stylesheet and then just use currency in the source:

.numeric, .currency {
    // etc.
}

.currency {
    // etc.
}

Using surrounding HTML tags for your exceptions is fine if you can do so in a semantic way. For example you might have some general styles on the currency class, but then a text-align: right on td.currency specifically.

The only other thing I'd say is that if you're having to use !important to override your own styles, you're doing something wrong!

Answer 3

The second one has problems when it comes to format just one place differently, let's say the product price sum. It can be possible that there are other places which also have the exact same three classes assigned, but don't have anything to do with a product price. In that case one would have to use the surrounding HTML tags to somehow "address" the specific place in the HTML file.

Isn't "addressing" like this the whole point of CSS rules and specificity? I think of it less as "addressing" and more like "namespacing" ;)

Personally, I prefer the second method; I tend to prefer using the id attribute to identify things ;)
... but the class attribute is nonetheless considered an element identifier.

In the end though, the purpose of the class attribute is used "for general purpose processing by user agents." I interpret this as meaning that the values you give it should cater to your application's needs.

So if your application needs to identify all the product prices - be it for CSS styling or for a jQuery script or a screen reader or whatever - identify them with a class attribute of product-prices.

If your application needs to describe all the numeric values - again, be it for CSS styling or for a jQuery script or a screen reader or whatever - identify them with a class attribute of numeric.

PS Please don't call it the CSS class; call it simply the "class attribute." Unless you're working in Asp.NET, there is no such thing as the CSS class, and even in Asp.NET - there shouldn't be a CSS class.

Sorry for multiple shameless links to my own web site.

Answer 4

Just an observation... People tend to forget that CSS is hierarchical. Let me give you a very simple sample (please the tags are reduced to the minimum):

<table class="product">
    <thead>
        <tr><th>Name</th><th class="price">Price</th></tr>
    </thead>
    <tbody>
        <tr><td>Product 1</td><td class="price">1</td></tr>
        <tr><td>Product 2</td><td class="price">2</td></tr>
        <tr><td>Product 3</td><td class="price">3</td></tr>
    </tbody>
    <tfoot>
        <tr><td>Total</td><td class="price">6</td></tr>
    </tfoot>
</table>

you can compose class styles with tag style to pin where the style will be aplied:

table { /* styles for all tables */ }
.product { /* styles for the product table */ }
.product thead { /* styles for the all product table header row */ }
.product thead th{ /* styles for header row generic column */ }
.product thead .price { /* styles for header row price column */ }
.product tbody { /* styles for the all product table data row */ }
.product tbody td { /* styles for data row generic column */ }
.product tbody .price { /* styles for data row price column */ }
.product tfoot { /* styles for the all product table summarize row */ }
.product tfoot td { /* styles for summarize row generic column */ }
.product tfoot .price { /* styles summarize row price column */ }

Or you can use only simple table tags (no th, thead, tbody and tfoot tags) like this:

<table class="product">
    <tr class="header"><td>Name</td><td class="price">Price</td></tr>
    <tr class="data"><td>Product 1</td><td class="price">1</td></tr>
    <tr class="data"><td>Product 2</td><td class="price">2</td></tr>
    <tr class="data"><td>Product 3</td><td class="price">3</td></tr>
    <tr class="footer"><td>Total</td><td class="price">6</td></tr>
</table>

And the CSS would be

.product { /* styles for the product table */ }
.product .header { /* styles for the all product table header row */ }
.product .header td{ /* styles for header row generic column */ }
.product .header .price { /* styles for header row price column */ }
.product .data { /* styles for the all product table data row */ }
.product .data td { /* styles for data row generic column */ }
.product .data .price { /* styles for data row price column */ }
.product .footer { /* styles for the all product table summarize row */ }
.product .footer td { /* styles for summarize row generic column */ }
.product .footer .price { /* styles summarize row price column */ }

This is not a final solution. Just a new approach to the problem.

Remember also that you can indicate some states or additional information to the CSS using custom attributes. See this sample:

<table class="product">
    <tr class="header"><td>Name</td><td class="price">Price</td></tr>
    <tr class="data"><td>Product 1</td><td class="price">1</td></tr>
    <tr class="data" selected="selected"><td>Product 2</td><td class="price">2</td></tr>
    <tr class="data"><td>Product 3</td><td class="price">3</td></tr>
    <tr class="footer"><td>Total</td><td class="price">6</td></tr>
</table>

See that the "selected" attribute at the "tr" tag has no effect in the standard renderization of the table since it is not a recognized attribute of the tag, but it can be identified by the CSS (and also by the javascript which is not the case here). Like this:

.product tr[selected=selected] { /* styles for the selected row */ }

Answer 5

I think its a bit of a personal approach. I also like the hierarchi and use that alot. But i use the entity variant most, but try to avoid as many markup as possible. A rule i use is titles always go with h1 or h2. And you can style accordingly inside your entity. So for example:

.product               { }
.product h1            { }
.product span.price    { }
.product span.discount { }

Same for lets say navigation:

ul.navigation          { }
ul.navigation li       { }
ul.navigation li.first { }
ul.navigation li.last  { }

And with that said, i always would say, go for the option wich has the least amount of markup, without losing your overview. Clean code is nice.