FCSS 2 lets you write utility classes that are the actual CSS property names
FCSS 2: Utility CSS that reads like CSS
FCSS 2 is a utility CSS library where every class name is a real CSS property and value, so `padding--24` compiles to `padding: 24px`. Hover, ARIA, and breakpoint variants are part of the class name, there is no runtime, and a purge step strips unused classes from the roughly 28 MB core stylesheet. It works with Vite, Next.js, Astro, Angular, PostCSS, or plain HTML via CDN.
If you know CSS, you already know FCSS.
- rhdunn
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.
- dankobgd
mfs will do anything except write normal css.
- bemtevi
This looks just like the old HTML, where people would specify everything in the HTML code itself!