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 make a main div appear next to a sidebar

    CSS how to center ::after pseudo elem

    Given an image button with borders how to stretch/repeat middle part in CSS for variable length content?

    Using CSS, how do I change the font color of parent
  • tag if child
  • tag is hovered over
  • How to modify HTML inside PHP by CSS [closed]

    How are these check-marks being drawn?

    how to target css for ie9 only?

    How to style JavaScript created text using CSS's @font-face

    Google Chrome unresponsive on simple CSS page - how to fix?

    How do I get IE7 to print this properly with columns hidden by CSS?
    What I ended up doing is simply specifying the widths on the cells themselves and not using the <colgroup> anymore at all. Not ideal in my mind, so I'll leave...
    Read more

    How to prevent css auto hyphenation for email addresses

    How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

    Google font shows boxes in Internet Explorer 8 - IE 8

    How to solve this (seemingly simple) formatting problem in CSS?

    How to Vertically Center 2 anchor tags with CSS?

    How to make hover using jquery without CSS?

    how to give css for arranging label, textbox and text area side by side in the same line

    How to use sprite images in html/css and toggle change with jQuery

    How to create a dynamic box with shadow - using PNG pictures

    How to get the current year using css?

    How can I get Sitecore Field Renderer to use a css class for an image

    How to apply first-child:first-letter to only one section?

    How to add new fonts in CSS for local testing

    Div inside how to call class in css?

    How to create Text Overlays in CSS?

    Generated web font doesn't show dots above Ü

    How do I achieve my bootstrap nav design?

    How to change the font-size uniformly?

    How to show a div on click of an li element using css?

    how to make a div expand to wrap a dynamic content in css