Disclaimer: we have been using functional css for about 2 years.
Let's review the main use case you present "I want to tweak all buttons on the site, I tweak it in one place":
- How many times do I have to change all the buttons on my app?
- Does changing one class work to change all buttons in practice? Don't I end up having the color overloaded 3 times, cascading over and leaking in 5 others spots?
- Are most of my edits in CSS tweaking existing rules, or piling up more CSS? Usually, in a large codebase, I end up just adding a class instead of tweaking one and figuring out if I broke anything anywhere.
- If I use a component-based approach, like Angular or React, do I really have to change classes everywhere with functional css, or just in the button component?
- Is styling "functional"? Can I always change the styling of a class without changing its semantics - like if I put the primary button the same as the secondary, did the naming help?
Your case may be different and our point of view may also evolve.
With functional CSS + component-based approach, I rarely have to use the style inspector - and produce beautiful, maintainable app with 14KB of CSS and no styling bug.
All my other attempts using CSS "the right way" lead me to 1MB+ of CSS.
The benefits of CSS to factor style by function seems very infrequent compared to the problems they introduce.
Let's review the main use case you present "I want to tweak all buttons on the site, I tweak it in one place":
- How many times do I have to change all the buttons on my app?
- Does changing one class work to change all buttons in practice? Don't I end up having the color overloaded 3 times, cascading over and leaking in 5 others spots?
- Are most of my edits in CSS tweaking existing rules, or piling up more CSS? Usually, in a large codebase, I end up just adding a class instead of tweaking one and figuring out if I broke anything anywhere.
- If I use a component-based approach, like Angular or React, do I really have to change classes everywhere with functional css, or just in the button component?
- Is styling "functional"? Can I always change the styling of a class without changing its semantics - like if I put the primary button the same as the secondary, did the naming help?
Your case may be different and our point of view may also evolve. With functional CSS + component-based approach, I rarely have to use the style inspector - and produce beautiful, maintainable app with 14KB of CSS and no styling bug. All my other attempts using CSS "the right way" lead me to 1MB+ of CSS.
The benefits of CSS to factor style by function seems very infrequent compared to the problems they introduce.