2 ms·
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 st
by Raphmedia 11y ago
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).