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


Tags: css

Problem :

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?



Solution :

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 */ }

    CSS Howto..

    How to set width of DIV to span with text inside it (so not fixed)

    How to declare a div in @page @top-left

    How to make padding:auto work in CSS?

    How to get the navigation element to have horizontal lines after each nav element in css

    How to stop a webpage from loading until all jQuery load functions are complete?

    How to make div expand all the way to the right

    Two sprites on same position: how to make this happen?

    How to test for existence of CSS class in JavaScript without jQuery?

    How do i make my Jittery DropDown Menu stable?

    How can I force a css flex child to be the only on its row?

    How to change font-size of a tag using inline css?

    How to imitate the native iPhone look and feel in a web app developed with the ASP.NET platform?

    how can i prevent to take input onkeypress anything other than alphanumeric

    How to add wikipedia in to a wordpress plugin

    JQuery - show/hide rows and manipulate css

    Showing divs in th on the same line

    How to reset tag in CSS

    How can I add image to facebook login button?

    Django + Mac osx how to use less css?

    How to align nav drop down menu in css?

    how to make an mail to form work

    How to modify a general css using javascript and jquery and return the result as a new id

    Symfony3 - how can I add a photo using Symfony

    How to prevent mobile keyboard from rising footer over the text fields?

    How to Stop jQuery from Buffering Hover Effects?

    How can I archive this responsive design?

    Drag and drop in AngularJS: make a directive that is a drop zone, showing an overlay when dragging

    How to organize css files in a Joomla 2.5 template? [closed]

    How to apply a CSS class on hover to dynamically generated submit buttons?

    CSS - How to prevent the DIV without content from shrinking