3 ms·

In my opinion it is better since having the two classes allow you, amongst other things, to use advanced selectors. Here is an horrible example from the top of

In my opinion it is better since having the two classes allow you, amongst other things, to use advanced selectors. Here is an horrible example from the top of my mind: <nav class="menu">...</nav> <div class="alert alert-<?php echo $alert-type; ?>">...</div> .alert { border: 1px solid #ccc; } // Basic alert style .alert-success { border-color: green; } // Success alert are green .alert-warning { border-color: yellow; } // Warning alert are yellow .alert-danger { border: 3px dashed red; } // Danger alert are red !!and have a bigger border!! .menu { margin-bottom: 14px; } // The menu has a margin of 14px under it so nothing can get close .menu + .alert { margin-top: -14px; } // Alert following the menu need to ignore the menu's margin .menu + .alert-danger { margin-top: -16px; } // However, the borders of alert-danger are bigger than the regular alerts

oneeyedpigeon 11y ago
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).

oneeyedpigeon 11y ago

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