What about a classes like primary-color, secondary-color, danger-color & success-color?
Having two elements share the same color creates a relation between the two elements. If you have decided to use the same color for both elements it is probably because this color has a specific meaning. If the color of one of the elements changes it is probably a good idea to also change the other element.
That sounds like an excellent use case for CSS variables.
Those were not supported across all browsers for a long time (recently IE11). Also, a variable only covers one property and is not adequate to extract many shared properties. Less/sass mixins and inheritance are a good way to extract reusable parts shared between components.
Re:CSS Zen Garden
by uk_programmer on Thursday March 19, 2020 @02:49PM
(#22630425)
If you call things what they are it works out better e.g. a class for a call to action class="btn-cta". Want a large call to action button class="btn-cta btn-large" or similar.
I really should write something on forgotten simpler CSS / JavaScript techniques.
Re:CSS Zen Garden
by justanotherc on Thursday March 19, 2020 @09:36PM
(#22633693)
This is exactly what Bootstrap does...
Re:CSS Zen Garden
by uk_programmer on Friday March 20, 2020 @03:03AM
(#22635611)
Kind of and kind of doesn’t. I am saying you should call stuff what it is. So a larger component maybe (this comment text box for example) the styling that belongs to that should all be grouped logically together. The easiest way to do this is have a element with a class attached called comment text box.
Bootstrap does this on some components but it has loads of positional bits and pieces mixed. Also the components are fairly generic.
No, they’re intended to group together semantically similar elements. There’s no reason that a blue button and a blue link should be related–what if I want to make the button red later?