A case against component libraries

CSS frameworks are a great way to quickstart a project. They let you focus on your application rather than the design. This is especially great if you are not a designer and don't have one in your team.

But over time you need customization and this is where the fight over specificity, the fight against the framework begins.

This is of course nothing new, people have argued over this for a long long time.

The thing though is, that this was actually not such a big problem before. Sure you maybe needed some !important and other ugly hacks here and there, but it was at least not hard to know where to add those overrides.

Nowadays, some small class you want to override lives inside a component of the framework, isolated away. The class names are generated automatically and what was once an easy hack away to change became incredibly tedious to override.

In Vuetify I find myself doing this

.list-tile:hover >>> .v-list__tile {
    background: transparent;
}

v-list__tile being a class inside one of Vuetify's components. If this internally used class name gets changed, will that even be mentioned in the upgrade guide?

Another thing is the API of modern CSS frameworks. Bootstrap's APIs and CSS classes were very simple to keep in your head. But today, whenever I develop using such a framework, I have to have the documentation of Vuetify, Material UI or whatever open at all times, getting ready to copy paste 50 lines of code for a simple dialog. There is no way I will remember all the props, scopes, events, etc. of each component. This whole copy paste action also takes away the fun to be honest.

Ever since I started using the low level utility-first CSS framework Tailwind, working with anything else feels unproductive. I've written a blog post on it here. Sure, at first you need to look at the documentation, but it's API is predictable and easy to remember, also there are tools for autocompletion available. The best thing is that it is completely framework agnostic. No new API to learn just because you decide to use React over Vue in your next project.