3 ms·

What does .menu + .alert-danger { margin-top: -16px; } do that .menu + .alert.danger { margin-top: -16px; } doesn't? Isn't "alert-danger" redundant? It mean

What does .menu + .alert-danger { margin-top: -16px; } do that .menu + .alert.danger { margin-top: -16px; } doesn't? Isn't "alert-danger" redundant? It means that, in practice, you need to do something like: .alert-danger, .list-danger, .heading-danger, .foo-danger, .bar-danger, .hum-danger { color: red; } instead of just .danger { color: red; }

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).

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).