为相同标签但行为不同的CSS类选择器命名的最佳实践

Question

Let's say I have a <td> html tag like this:

....
<td>Sample Item 1 - Common Item</td>
<td>Sample Item 2 - Important Item</td>
<td>Sample Item 3 - Common Item</td>
....

And then for the Important Item I need to (for example) color it in red. Currently Common Item don't need any style and I don't know whether in the future it will need any style or not. If I want my .Less file follows the best practice on writing css class, should I create the css class in .Less like this:

.item {
    &.item-important {
        color: red;
    }
}

and use it like this:

....
<td class="item">Sample Item 1 - Common Item</td>
<td class="item item-important">Sample Item 2 - Important Item</td>
<td class="item">Sample Item 3 - Common Item</td>
....

OR should I only create the css class in .Less like this:

.important-item {
    color: red;
}

and use it like this:

....
<td>Sample Item 1 - Common Item</td>
<td class="important-item">Sample Item 2 - Important Item</td>
<td>Sample Item 3 - Common Item</td>
....

I'm a bit confused since in Bootstrap I saw a lot like btn btn-default , or like glyphicon glyphicon-asterisk . Why they don't just put like btn-default or glyphicon-asterisk ? I can't seem to find a good post explaining the best practice and reasoning for this naming style for css classes. Any insight would be much appreciated!

---------------------------- Update ----------------------------

So I was then reading this documentation http://getbem.com/naming/ , and found this: Now I'm sure that if I have the style for item base class, the best practice is putting:

....
<td class="item">Sample Item 1 - Common Item</td>
<td class="item item--important">Sample Item 2 - Important Item</td>
<td class="item">Sample Item 3 - Common Item</td>
....

But if I don't have the style for item yet, is <td class="item--important">...</td> still a bad exercise? I'm also considering YAGNI here..

Answer 1

The concept of naming the CSS classes as such as known as the BEM nomenclature/method , which is an acronym for b lock- e lement- m odifier. What BEM does is that it advocates for a clear and standardised way of naming your CSS classes, so that you do not get easily confused.

The BEM method is what that inspires the CSS classes you come across. In your question, you mentioned btn and btn-default . In strict BEM sense, that would be btn and btn--default , since "default" is a modifier/state. However, different authors and frameworks have different means of separating these terms, so btn-default is just as legitimate as btn--default —as long as you are consistent throughout your stylesheet.

In this case, btn is the base class of all button-like elements. It likely contains some base styles (like padding, line-height, positioning). btn-default is an extension of the btn class, perhaps containing colors for the "default look" of the button (I can imagine authors having a standard call-to-action color for buttons). Declaring btn-default itself does not make sense, because it extends on or modifies the btn class, which means it lacks the base styles of what is intended to be a button.

Based on this logic, even when item does not have any styles explicitly tied to it, you should still include it in your markup, along side with item--important , for example. Using item--important itself has no meaning.

If you would indulge me in a rather more verbose example, let's say you have the following layout: you want a <div> that spans the full width of a container, and sometimes you wanted it to expand beyond the container, and etc...:

 body { background-color: #ccc; margin: 0; padding: 0; } section { background-color: #fff; margin: 1.5rem 3rem; position: relative; } /* Base styles for .content */ .content { background-color: #eee; margin-bottom: 1.5rem; padding: 1rem; } /** * Modifier: expand * Now, we want to increase the width */ .content--expand { position: relative; left: -3rem; width: calc(100% + 6rem); } /** * Modifier: important * Now, we want to draw attention to this content */ .content--important { background-color: #b13131; color: #fff; } 

 <section> <div class="content">I am content, with default styles</div> <div class="content content--expand">I am content, with expanded width. Note that I inherit base styles from my `.content` block</div> <div class="content--expand">I am expanded width content without using `.content`. Look that I am messed up.</div> <div class="content content--important">I am a very important content.</div> </section> 

Note that the appearance of one of the <div> element is off: that is because it does not have the class .content , and therefore fails to inherit the "default" look of the .content containers ;)