In my opinion, you are mostly right that "alert danger" and "alert alert-danger" would be the same. The exception would be that you could easily apply global styles to "alert danger" via the ".danger" class. However, I find that in big websites, I don't want to rely on the global scope (for lack of better words) too much.
All my alerts and message styling would be in a separate myApp-messages.scss that would ultimately be merged into myApp.min.css
In this myApp-messages.scss, I would create all my own classes that then extend global style definitions if needed but avoid using them.
.alert{
color: $text-color;
background: $light-background-color;
&.alert-danger {
@extend .danger; // if needed at all
color: $danger-color;
}
}
As for "alert alert-danger" vs. "alert-danger". It is true that you could do something like :
.alert {
color: $text-color;
background: $light-background-color;
}
.alert-danger{
@extend .alert;
color: $danger-color;
}
In the "alert alert-danger" case, you can easily target all <div class="alert"> and then use advanced selectors to filter out or target more specifically its other states. You can also easily append/toggle the modifier classes with jQuery. With <div class="alert-danger", you rely on the css preprocessor to do all the work and in doing so cut yourself from using some tools.
It's all a matter of philosophy, really. I like to have as many tools to do a job as possible, so I try to have as much classes on my elements as I can without going overboard (I'm looking at you, Drupal).
