HOTTAKE, I DESPISE CSS frameworks like Tailwind, Material UI, Bootstrap, and so on. Why? Well let me share my experience on working in production with one of these frameworks. Today I’ll review the pros and cons and try to convince you when you should hand-roll your own CSS compared to when you should not. Also some of the strategies I’ve found to work over my career as a developer for the past decade.
Starting with a cautionary tale (slight bit of a vent :3) and prime examples for why these frameworks fail to do there job. Also about the dogma and ego developers have and how they can hurt the users experience and ruin the visual appeal of a site; Making the web, and your site, staler than a months old saltine cracker and buggier than a Bethesda game.
a developers ego
A client in the past tasked me with building out a filesystem on the web, pretty much a google drive clone. The client’s development team used Vuetify, a component framework like Material UI just for Vue. The timeline for completion and the sheer scope of the project, it made sense. I had no qualms with it, and pretty much felt like any other component framework out there. My only gripe was the layout abstractions they had. Even for a CSS framework, absolute dogwater.
This became a massive pain-point and one of the many bugs I fixed countless times by ripping it out and replacing it with just plain old CSS grid. We had many discussions with the developers about the painful Vuetify grid system and the continued scourge that it had on the codebase.
In comes the architect of the team. This individual worked on backend and cloud majority of the time. I highly respect this individual and they have some great ideas about backend and infra, but when it comes to frontend, they where as clueless as clueless can be.
While in the middle of wrapping up the state management in the frontend for the filesystem, they where waiting for work so they decided to take a crack at the user story for the filesystem grid. I specifically told this developer to use CSS grid as a plea and to skip the grid abstraction in Vuetify since CSS grid is the GOAT. “ok” they said. Oh the horrific code I found in there PR later that week.
I can’t share exactly what they coded from the bygone era but what I found wasn’t far from a horror movie. A deeply nested mess of the Vuetify’s grid system. Polar opposite of responsive and values where hard-coded all over the place. They used padding and margin utility classes as a crutch to make it look like the designs but broke as soon as you changed the size of the screen. The animations where so BORKED it would elasticize on resize like a piece of jello and chug like an old films framerate. Not to mention, a roughly 3000 line component. They choose to just shove all the code into one component, copy pasta 3 grid items, and did zero prep for when I needed to hook up the state, and called it a day.
This fucking SUCKED to untangle and understand. I didn’t say much to the developer and did a LGTM on the PR. We had already covered this many times in team meetings and yet still here we where. I calmly asked “didn’t I say to use CSS grid?” and their reply “yeah, but where using Vuetify, so we should do it the Vuetify way”. For context, early on in the project they picked out Vuetify and they praised it as the best CSS framework out there, even though they never even reaped what he sewed.
I ended up re-writing a lot of the code to CSS grid. When my PR came in with the functional code to get the filesystem working with the UI, the developer had a HISSY fit over the PR. They said “why did you rewrite my whole component?!” and I replied “well I needed to make it more responsive and break it out for better readability and maintainability”. He did not like that.
No matter what kind of developer you are, we all have an ego, especially me included. When it comes to CSS frameworks I feel like there’s a pervasive dogma online on which framework is the best and why. I’m here to tell you Fuck all that noise. The best CSS framework IMO: just rawdawg’in CSS like a GIGACHAD, like the forebearer’s of yesteryear.
Developers shouldn’t marry to tools, they should marry to fundamentals. Grid, Flexbox, and really any CSS will out pace any kind of abstraction you give. It’ll live longer than any framework you choose, any tool you subscribe to. I wish more developers would realize that and take the time to understand the cost and purpose before adopting some of these tools into the stack.
love(hate) letter for abstractions
With that rant out of the way, let’s pull apart the why. Many new developers, and yes also many self proclaimed seniors, will advocate for a lot of these abstractions as I like to call them. They fill your inbox and feed’s with self proclaimed “ease of use” and “developer productivity” but I pro-claime nah!
Many of these frameworks come pre-packaged with a whole slew of pre-styled components with there own set of functionality. These can have massive time saving benefits, especially when building out an MVP or more when building the component yourself would take weeks to get right.
The scenario described above is the perfect use-case for those CSS frameworks, but when it comes to the layout abstractions and long term stability, I tend to draw a line in the sand. You should almost always just write the layout code yourself. CSS already has the best layout system bar none and I’d like to see you try to convince me otherwise.
When you understand the fundamentals and use the frameworks the way the developer intends, they can cut development time down, but even then, they are not a replacement for the fundamentals and should be seen as short term gains rather than long term stability. A lot of these also depend on how long that code will live. Countless times I’ve pulled out these CSS frameworks in favor of just writing the styles myself. The more you try to bend these components and layout systems to your will, the more time and effort you spend bending backwards to try and get the look your going for.
readability and simplicity over ergonomics and speed
I think if you ask any good developer what the single best thing you can do for yourself and others in a codebase is to prefer readability and simplicity over ergonomics and speed. This is why I hate utility classes and wish that developers would take more time to write the CSS in an organized matter.
Does this take more time and effort? Absolutely, but its imperative that you get this right for your future self as well as your teammates and whoever comes across your code in the future. CSS fundamentals don’t change much over the years but the next new hottest framework steaming off the Javascript hype train does, WAYYY to much!
This is why I love B.E.M.. If your not familiar the methodology, I highly suggest that you take the time to understand the pattern and religiously adopt it wherever you write styles. The TLDR, a way of organizing and writing CSS in a way that’s easy to understand and add to over the long run without sacrificing to the readability gods.
The best part, there is nothing you need to install, you don’t need to transpile your CSS for it to work, just good o’ld Bessy at her finest, raw CSS. It’s tried and true, it’s used in production on millions of website, and the best part is it’s opt in wherever you use it, un-opinionated (mostly), and easy to pick up.
gray, gray everywhere
Maybe it’s just me, but I definitely prefer the more weird and wacky look of the internet in the early 2000’s to the homogenous look we see nowadays on every site. Do you want your site to look like all the other vanilla ice cream site across the web? It’s like looking at the Costco bread isle. Overwhelmed and lost in the sheer “sameness” of it all. Is there really a difference between this chemically filled, loaded with sugar, loaf of sponge called “bread” to the next?
I miss the days where I could go online and see the personality of each site. It really gave you sense of place that I feel the internet (also ironically America as a whole) lacks. Using one of these CSS frameworks just kills the soul, joy, and creativity of the web apposed to writing your own styles gives you a sense of limitless possibilities with a sense of “well maybe I’ll make the button a bit different this time”.
Writing your own styles gives it a little bit of a personal touch and allows you to add a little bit of creative spin. Yes reinventing the wheel can be boring but why not spice it up a little? maybe make the icon move a little when you hover. Give it a little bit of box shadow or change the gradient just a tad. As an avid web user I love these small details and they make a site just feel more cohesive.
conclusion
CSS frameworks are not going away, and yes there useful, but I feel like as developers we reach for them too much and fail to understand the fundamentals and put custom styles in the backseat far too often than we should. Many fail to understand the beauty and simplicity in writing your own styles and I hope this articles inspires others to maybe take a step back and try writing them on your own.