What should a CSS Class represent? [duplicate]

This question already has answers here: Closed 11 years ago.

Possible Duplicate:

Should css class names like 'floatleft' that directly describe the attached style be avoided?

I was wondering what the best practices were for the naming and usage of CSS classes.

For instance, in a scenario where you want to center the text of both the button text and the header text, is it better to repeat this style in both classes like

.button-text {
    text-align: center;
    /*some properties*/
}
.header-text {
    text-align: center;
    /*other properties*/
}

Or is it better practice to move that s开发者_运维知识库tyle out into a separate class like

.center {
    text-align: center;
}
.button-text {
    /*some properties*/
}
.header-text {
    /*other properties*/
}

and have the class of "center" applied to elements that have the classes of "button-text" and "header-text".

What it comes down to, is, should CSS class names represent what an element is "button-text" or "state, what an element looks like "center"?

Thanks!

---

A CSS class should represent what you use the element for, not what the element looks like.

Consider that you have headers that are red and bold, and change the design to large blue letters instead. If you named your classes after the look of the headers, you end up with:

.RedBold {
  color: blue;
  font-size: 200%;
}

---

Having a class named center is definitely the wrong approach - this class name already implies the presentation, that's not the point of defining presentation in a separate file. A better way to avoid code duplication would be:

.button-text, .header-text {
    text-align: center;
}
.button-text {
    /*some properties*/
}
.header-text {
    /*other properties*/
}

Another option is specifying multiple classes, e.g. class="button text" instead of class="button-text". This gives you:

.text {
    text-align: center;
}
.button.text {
    /*some properties*/
}
.header.text {
    /*other properties*/
}

Unfortunately, this approach has to be ruled out if you need to support MSIE 6.0, all other browsers (including newer MSIE versions) deal with multiple classes correctly. As other people already noted which solution you choose is mainly a question of maintenance - choose the one that will be easier to change and adapt to new requirements.

---

Maintainability is king. Whatever you find most easy to maintain - in my opinion, this is your second example.

---

It depends how much you will center text, the issue with the second point is that you could then end up with a long list of classes added to each element in your HTML which isn't so clean.

If these happen in, for example, a p tag a lot, then you'd possibly be better off putting one class in the parent so the children can inherit it.

---

i tend to group items together example like

.button-text, .header-text{
    text-align:center
}

then if they need something unique add that to another

ie

.button-text{
    font-size:22px;
}
.header-text{
    font-size:44px;
}

class name's should be usefull but its not a biggie, just ensure they are unique. Often i name things based on their hierarchy within a page or section, as to prevent any accidental duplication.