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.