Over time I've come to find a balance between something like tailwind/FCSS (one class per CSS style) and Bootstrap (classes reflect components).
Specifically:
1. provide a baseline of default styling on the HTML elements/attributes;
2. provide a set of classes for different layouts: grid, flex, masonry, etc.;
3. provide combinations of styles on the different elements: ol.flex/ul.flex removing the list type and padding, dl.grid providing a grid-style display list, etc.;
4. provide helpers to combine with the base classes or elements: flex.vertical to control orientation; flex.wrap/grid.wrap to wrap the layouts; *.centered for centered text; etc.
The main reason to use libraries like this is because you can't put media queries or pseudoclasses like :hover inline in a style="" attribute.
(I mean, this particular library seems to be one of those AI-generated ghost town projects that has stuff like a big fancy GOVERNANCE.md but no actual user or contributor community, but that's the strongest reason I've heard to use things like Tailwind.)
The difference I can think of is the ability to play with priority (unlike style="" which has fixed priority), but I'm not sure if that's an advantage or a disadvantage. :)
Functional CSS: utility classes named after real CSS properties. One class, one declaration, zero runtime. Works with Vite, Next.js, Astro and Angular.
People write classes so they don't have to remember whether to type 'justify' or 'align' and whether it's '-content' or '-items', or what order and unit syntax to use for the single `flex` prop or grid layouts. CSS is amazingly powerful, especially nowadays, but the DX is still atrocious.
Over time I've come to find a balance between something like tailwind/FCSS (one class per CSS style) and Bootstrap (classes reflect components).
Specifically:
1. provide a baseline of default styling on the HTML elements/attributes;
2. provide a set of classes for different layouts: grid, flex, masonry, etc.;
3. provide combinations of styles on the different elements: ol.flex/ul.flex removing the list type and padding, dl.grid providing a grid-style display list, etc.;
4. provide helpers to combine with the base classes or elements: flex.vertical to control orientation; flex.wrap/grid.wrap to wrap the layouts; *.centered for centered text; etc.
mfs will do anything except write normal css.
This looks just like the old HTML, where people would specify everything in the HTML code itself!
Dumb q.
If css properties and values have been mangled into valid css classes, why not simply set the property and value ?
Is there a need for the indirection ?
The main reason to use libraries like this is because you can't put media queries or pseudoclasses like :hover inline in a style="" attribute.
(I mean, this particular library seems to be one of those AI-generated ghost town projects that has stuff like a big fancy GOVERNANCE.md but no actual user or contributor community, but that's the strongest reason I've heard to use things like Tailwind.)
The difference I can think of is the ability to play with priority (unlike style="" which has fixed priority), but I'm not sure if that's an advantage or a disadvantage. :)
Functional CSS: utility classes named after real CSS properties. One class, one declaration, zero runtime. Works with Vite, Next.js, Astro and Angular.
People write classes so they don't have to remember whether to type 'justify' or 'align' and whether it's '-content' or '-items', or what order and unit syntax to use for the single `flex` prop or grid layouts. CSS is amazingly powerful, especially nowadays, but the DX is still atrocious.