News for hackers. Stuff that matters.
Re:CSS Zen Garden by dsego on Thursday March 19, 2020 @10:20AM (#22627706)
If you look at some talks on ideas behind oocss you can understand that a lot of elements share similar styles. It's all boxes in the end. There is this one talk about refactoring a huge pile of css into a small number of reusable visual styles, I think it was for facebook. The semantics of an element might be a comment box, but visually it's a box with a shadow and a chat box or sidebar might share the same look, thereby it would make sense to assign them the same class (classes are intended for extracting common visual styles). Doing styles the zen garden way was usually done via long selectors to target the elements and you would end up with css code that is tightly coupled to your markup. Moving html sections would cause the styles to break. Using strictly visual styles (ie functional classes) makes it easier to distinguish the style aspect from the content and HTML is already a presentational medium.
Re:CSS Zen Garden by saagarjha on Thursday March 19, 2020 @11:09AM (#22628194)
> 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?

Re:CSS Zen Garden by sbergot on Thursday March 19, 2020 @11:39AM (#22628471)
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.

Re:CSS Zen Garden by saagarjha on Thursday March 19, 2020 @11:54AM (#22628639)
That sounds like an excellent use case for CSS variables.
Re:CSS Zen Garden by dsego on Thursday March 19, 2020 @12:41PM (#22629168)
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.