5 ms·
How do you handle advanced selectors? Or hover states? Or priority? Or inheritance? There is a lot of reasons why separating content and styling is benefitial
by bbx 11y ago
How do you handle advanced selectors? Or hover states? Or priority? Or inheritance?
There is a lot of reasons why separating content and styling is benefitial to both the designer and the developer. And why semantic classes, especially with tools like Sass where abstraction and reusability are key, allow to describe the content, not define its looks.
That's why we went from color="red" to style="color:red;" to class="red-text" to class="alert alert-red" to class="alert-danger".
- oneeyedpigeon 11y agoAlthough bear in mind that bootstrap still does class="alert alert-danger" so they disagree slightly on that point.
- ryanSrich 11y agoIf you're using sass you just extend alert inside alert-danger. No need for two classes.
- talmand 11y agoBut then you'll create bloat. Multiple classes assigned to an element is far more efficient then repeating properties with the same values over multiple classes in the stylesheet.
- Raphmedia 11y agoYes, 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 agoYes, 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 agoIn 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
- peterchon 11y agoHi, thanks for taking a look. I'm not trying to be bootstrap. I wanted a way for users to add css without using an inline-css. As for psudo selectors, it's still easy: .do-this-on-hover:hover { ... }