Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

Its seems like there are 2 ways someone can handle naming classes for elements that are designed to have multiple classes. One way would be:

<span class="btn btn-success"></span>

This is something that twitter bootstrap uses. Another possibility I would think would be:

<span class="btn success"></span>

It seems like the zurb foundation uses this method.

Now the benefits of the first that I can see is that there less chance of outside css interfering with styling as the class name btn-success would not be as common as the class name success. The benefit of the second as I can see is that there is less typing and potential better style reuse.

Are there any other benefits/disadvantages of either option and is one of them more popular than the other?

share|improve this question
add comment

5 Answers

Beside personnal preference there is no real advantange of one solution over the other.

<span class="btn success"></span>

If you want to access all of your buttons the selector .btn {/* styles here */} will do the trick, if you want to access all your success elements (message bar, label and buttons the selector .success{/* styles here */} will do it and if you want to specifically access your success button .btn.success {/* styles here */} will get the job done

.btn {/* styles here */} /* Single class has to be applied to element for those styles to take effect */
.success{/* styles here */} /* Same a previous goes here */
.btn.success {/* styles here */} /* Both classes must be on elements for those styles to take effect*/

This method is what oocss (object oriented CSS) is refered to

The other notation is allowing the same thing but in a more verbose way like :

.btn.btn-success {/* Style here */}

or

.btn-success {/* Style here */} /* Same but without the constrain of using .btn class as well*/

So its really down to personnal reference.

<span class="btn success"></span> improves readability in the css file while <span class="btn btn-success"></span> improves readability in the html file.

see Twitter bootstrap for a full blown css framework using similar technique.

share|improve this answer
add comment
<span class="btn btn-success"></span>

Benefits

The above example takes advantage of namespacing, i.e. success goes with btn, there could also be btn-info, or btn-danger as other examples. This provides for a memorable, and easy to type API.

share|improve this answer
add comment

Success can, and is, being used multiple times for multiple applications. You can have a button success but also a label for example. It is just too generic. Next to that it is clear that it can be applied to a btn without explanation. So it is also more clear. Otherwise you would need some smart trick to see what additional classes could be applied, now all classes with a prefix apply to the main class element.

Also this is a quite relevant question about the use of 2 classes instead of one: http://stackoverflow.com/questions/10501544/why-does-twitter-bootstrap-require-multiple-classes-for-buttons

share|improve this answer
add comment

I wouldn't do either. It's not going to be at all clear, from looking at your CSS, what .btn is being applied to. I would assume it was a button (and curse you for not using input[type="button"]) and not a span. Only if I went to look at your HTML would I have a clue what you're doing. Even from your question, I have an urge to ask you what exactly you're trying to achieve.

Choose style names that indicate the type of content within the element.

"success" is a good class name. It tells you that it's an area of content which will indicate success. It implies there will be matching styling for failure. But I'd still want to know it was a span.

span.success

Then if you were to apply an extra style to a button within that span, I'd want to see

span.success input[type="button"]
share|improve this answer
add comment

In short, depending on the CSS version answers may vary.

Because, that fact will make difference on suggested approaches. However, if you do not rely on CSS3 look at this post - How to Develop with CSS

I would recommend to have naming like : <span class="button result-success"></span>

<span class="button result-pending"></span>

It has an advantage of clear naming, less confusion in a team development. My rule of thumb is to avoid abbreviations.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.