I started creating my own global css file a few years ago to use on top of Bootstrap. Still, projects would require more custom CSS and have all these extra styles. It still would get messy.
Now I’ve found there are a few people who have this idea of just creating global css files that just give every style a single class. This way you just write all your CSS once for all your projects and spend your time adding classes to your HTML instead of trying to group and organize CSS.
Bootstrap is somewhat like this but imposes, maybe, too much of its own design style by default without really inviting deep customization with more properties within Bootstrap.
The below options are far more granular / less opinionated than Bootstrap and have become the most popular options for this type of CSS structure:
https://github.com/tachyons-css/tachyons/
https://github.com/tailwindcss/tailwindcss/
https://github.com/basscss/basscss/
And even big companies are releasing their own versions:
Though there is a huge amount of debate about whether this is a step forward or a step backwards. It’s interesting how torn people are on this.
The jury is somewhat still out for me. My initial trials tell me that usage of this is very situational, based on the type of CMS or app you’re working on or with.
I am also not sure whether some hybrid option might work as well since part of the benefit seems in having a standardized process and hybrid could lead to confusion.
Semantic CSS, when done right using SASS, actually seems easier to maintain but I am giving it some more time.
Functional CSS and the documentation around has been, however, a good way to brush up on some CSS stuff like flex boxes I hadn’t been that aware of.