[saagarjha]

> classes are intended for extracting common visual styles

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?

[sbergot]

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.

[saagarjha]

That sounds like an excellent use case for CSS variables.

[dsego]

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.

[uk_programmer]

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.

[justanotherc]

This is exactly what Bootstrap does...

[uk_programmer]

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.