What should a CSS Class represent?

Question

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 style 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!

score 7 · Accepted Answer · edited Jun 08 '11 at 11:48

7

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%;
}

edited Jun 08 '11 at 11:48

thirtydot

224,678
48
389
349

answered Jun 08 '11 at 11:25

Guffa

687,336
108
737
1,005

-1 RedBold class with color:blue contradicts post... – Treemonkey Jun 08 '11 at 11:27
2

@Treemonkey: You missed the point. Read the answer again. – Guffa Jun 08 '11 at 11:27
@Guffa my bad! you got a point there ;) – Treemonkey Jun 08 '11 at 11:31
@Treemonkey: You should be able to take back the downvote now. – thirtydot Jun 08 '11 at 11:48
@Guffa / @thirtydot : Sorted upvoted! – Treemonkey Jun 08 '11 at 12:26

Wladimir Palant · Answer 2 · 2011-06-08T11:52:07.843

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.

score 0 · Answer 3 · answered Jun 08 '11 at 11:16

0

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

answered Jun 08 '11 at 11:16

Michael Robinson

29,278
12
104
130

1

Tools such as Dotless can be used to help maintain your code. I was wondering about more about what a class really should represent, not as much about how maintainable the code is. – Mac Attack Jun 08 '11 at 11:20
I still lean towards your second example. – Michael Robinson Jun 08 '11 at 11:21
probably good practice but for large sites where there may be minor changes needed often then best keep things separated! otherwise a simple change could have MANY undesired effects! – Treemonkey Jun 08 '11 at 11:21

Treemonkey · Answer 4 · 2011-06-08T11:24:46.470

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.

score 0 · Answer 5 · answered Jun 08 '11 at 11:20

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.

What should a CSS Class represent?

5 Answers5