undefined | Better HN

0 pointsRaphmedia10y ago0 comments

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

0 comments

3 comments · 1 top-level

oneeyedpigeon10y ago· 2 in thread

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.

RaphmediaOP10y 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:

.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

oneeyedpigeon10y 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; }

1 more reply

j / k navigate · click thread line to collapse