Functional CSS: utility classes named after real CSS properties. One class, one declaration, zero runtime. Works with Vite, Next.js, Astro and Angular.
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. :)
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.)
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.
FCSS mantra is compatible with that. You can use utility classes for most of the work, if you work with components. And for cases where a component is so mutable in terms of styles, you can use c- classes where you can go free as much as you want.
12 comments
[ 0.23 ms ] story [ 28.4 ms ] threadIf 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 ?
(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.)
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.