Below is an excerpt from http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ explaining why you would want to use multiple related classes on an element vs. one class that gets extended in the CSS.
Components often have variants with slightly different presentations from the base component, e.g., a different coloured background or border. There are two mains patterns used to create these component variants. I’m going to call them the “single-class” and “multi-class” patterns.
.btn, .btn-primary { /* button template styles */ }