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?