[every_other]

I'm not sure why that was suggested. Our team has migrated to utility css (Tailwind) and we never do this. The basic approaches are either to create a component or template for the button and put the utility class there or use Tailwind's `@apply` utility to create a `.button` class with the utilities applied to that class.

I had some reservations at first but in practice it's been pretty much universally agreed to be great for us. It removes a huge amounts of css cruft that happens over time (unable to determine which classes are still being used, where, etc), keeps colors, margins, etc. standardized through a centralized config file and prevents you from constantly bouncing back and forth between style and markup files.

[arkh]

First line of the first example you get in "what is Tailwind":

  <div class="bg-white

Just accept the fact your HTML contains your styling and go with:

  <div style="background:white"

There was a time when people thought CSS could be used to style some logical HTML:

  <div class="card-wrapper"

So the day you want to change the color of your card-wrapper from white to green you can change a line in some CSS and not have to go around all your HTML or end with a <div class="bg-white"> with a green background.

CSS frameworks feel like a "let's get all the shit CSS was meant to help remove and just put it in divs".

[every_other]

Yeah, think that's everyone's first reaction (you shouldn't mix style and markup) but with a component centered development pattern, those concerns largely become non-issues. `card-wrapper` becomes a component and you update your styles there.

I will just say theory aside, in practice, this has worked out great for our team. In my 5+ years experience, I've constantly run across the issue of legacy code with thousands of classes, referencing potentially non-existent markup and countless one-off tweaks. You can start with the best intentions and organization in your SASS files but eventually things start to get really crufty. Keeping everything in components and keeping styles in the markup alleviates a lot of that.

[sam0x17]

On that note, would love to see developer tools in the major browsers complain with warnings about missing CSS classes :/

[dwild]

> CSS frameworks feel like a "let's get all the shit CSS was meant to help remove and just put it in divs".

You just made me realize this is why I always have a hard time every time I try a CSS frameworks.

It always goes the same way. I'm first amaze by all what they offer, how simple and quick a great UI can be made. Then when I try to use it, there's always something wrong and I hate how it goes and I always stop and goes back to the logical ways to do it entirely in CSS.

I guess I should try some CSS preprocessor, they must support heritage of CSS class I guess.

[dsego]

You should, you can have mixins, class inheritance, the whole shebang.

[komali2]

We do this with less + bootstrap. So we'll have have something like

.button-critical{ .btn .btn-red }