3 ms·

Yes, but "alert" simply means "this is an alert" (so, it may be a box or a popup, depending on where it is on the app/website). "alert alert-danger" means that

Yes, but "alert" simply means "this is an alert" (so, it may be a box or a popup, depending on where it is on the app/website). "alert alert-danger" means that this alert, whatever shape it is in, is also the alert for danger. It may be red, yellow, blink, have javascript attached to it, etc. However, it is not "alert alert-red"... What if your client wanted to never use the colour red again because his competition is branded red? You need to go through all the CSS (a few lines of :red needs to be changed to :yellow). You however also need to go through all your view, templates, possibly some hardcoded parts of the code, to change "alert-red" to "alert-yellow"... simply have it "alert-danger".

oneeyedpigeon 11y ago
Yes, I fully understand why "alert-danger" is better than "alert-red". What I don't quite get is why "alert alert-danger" is better than "alert-danger". Isn't it possible - using a preprocessor - to maintain alert-danger, alert-warning etc? If multiple classes must be used, why not just "danger" which then allows the red coloration to be shared amongst different object types without being repeated.
- Raphmedia 11y ago
  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

Yes, I fully understand why "alert-danger" is better than "alert-red". What I don't quite get is why "alert alert-danger" is better than "alert-danger". Isn't it possible - using a preprocessor - to maintain alert-danger, alert-warning etc? If multiple classes must be used, why not just "danger" which then allows the red coloration to be shared amongst different object types without being repeated.

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