Functional CSS: utility classes named after real CSS properties. One class, one declaration, zero runtime. Works with Vite, Next.js, Astro and Angular.

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 ?

mfs will do anything except write normal css.

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.

This looks just like the old HTML, where people would specify everything in the HTML code itself!

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.