Originally posted at michaelzanggl.com. Subscribe to my newsletter to never miss out on new content.
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.
What are your thoughts on modern CSS frameworks? Do you enjoy using them?
Latest comments (28)
You could even use CSS itself. No 2nd DSL to learn and will continue to work for the longest of times. I'm sort of partially kidding. The JIT removal thing in TW is pretty sweet. Certainly it's viable and folks are building great stuff with it. Same for BS too though. Great stuff can be built with it.
My thoughts on modern CSS frameworks? I know most call them frameworks. But shouldn't we be calling them libraries? Well, I've created my own such library and it will help me next time I need to build a design system for a company and they only want to give me 3 months to do it. Writing a custom framework from scratch probably takes about 9 months to a year imo. So I've elected to waste a bunch of my extra time creating AgnosticUI lol. Hopefully it'll pay off.
@mzanggl is amazing!
Style-agnostic lightweight framework/library without dependencies that solves tough UI problems (iOS modal, accessible drop down nav etc): github.com/radogado/natuive
Re-writing those components for every project is impossible.
Thanks for checking it out. Regards.
I feel like you really need to check out TailwindCSS...
As you said, Bootstrap-like frameworks are a good alternative when you don't have a designer in the project or even when you don't have time to create a styleguide properly.
After thinking a lot about the need of those big CSS frameworks in my projects, these ones crossed my path:
As a front-ender, I love to create the styles and optimize it until it breaks. Excluding Bulma and Primer, the above are considered micro-frameworks or even CSS starter packs; and they helped me to save time while developing.
material-ui for react seems ok, even if you have to override some things, but yeah, reading documentation for API and how it should be used is crucial part of it. Recently started to use styled components and I like it a lot. Writing my own styles without css frameworks.
This is a great thought to have. The key things I've found is when using frameworks :
I also found that you can use frameworks to help promote and control consistency when working with multiple devs. Bad patterns are easier to spot, and in-eficciencies are noticeable if you follow the above guides.
There are upsides to using a CSS library such as Material, which applies best practices out front and doesn't require the use of the entire library. Often I find it to be the fault of designer/developer teams who find it easier to import an entire framework into an app when only 15% to 40% of it gets used.
I found that together with LitElement created web components I can choose specifically what I want to include as shared CSS across all components and adding only what I need keeping the components light while enjoying shadowDOM isolation and reusability. It's great to have options, but I'm very sensitive about just how many bytes we have to deliver to a screen.
This isn't really a case against frameworks, it's a case against frameworks that aren't Tailwind. Or at least, frameworks that aren't lightweight/functional.
Yea, basically CSS frameworks that are based on a JS component library/framework like vue or react. Is there a term for such frameworks?
Yes, those are JS Component Libraries. If you can't use it without the JS framework, it's not really a CSS framework like Tailwind, Bootstrap, Bulma, etc. e.g. Vuetify is a Vue component library.
Ever try shadow DOM? It's been liberating for me. Nowadays I just apply styles as needed - no need for baroque classes or
!important.Will give it a try!