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

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 2

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.