DEV Community

loading...

Discussion on: Why you should Stop using CSS Frameworks

Collapse
bholmesdev profile image
Ben Holmes

Hm, I feel there's a lot of nuance here that's worth considering.

First, I'd want to draw a distinction between a) pre-styled, prescriptive frameworks like Material UI and Bootstrap and b) utility frameworks like Reach UI and Tailwind CSS.

The former definitely comes in handy for anyone trying to build full stack applications without a design team on standby. For such an audience, the training wheels provided by, say, Material UI components are critical for moving fast.

These training wheels also ensure accessibility guidelines are met without as much research on the developer's part. You may not think about it, but hacking together dropdowns and tab sliders that look good won't always work well for all people. I recently wrote a longform post on building an accessible navbar for this very reason; there's so many little things to consider that Material UI et al. will consider ahead-of-time!

Now let's consider those utility frameworks. If you're unfamiliar, frameworks like Reach UI provide a "skeleton" of CSS and React components to build your own visual identity on top of. This framework merely exists to help you hit accessibility guidelines for modals, tabs, custom select boxes, etc, while also giving you powerful CSS selectors to build from. I'm a CSS warrior myself, so I lean on this type of CSS framework super hard to get things done.

I also threw in the Tailwind utility framework, which also empowers you to build your CSS from a set of building blocks. However, this takes an entirely different approach to the problem that's worth its own evaluation. Check out this post by @swyx to understand that one a bit better.

My personal stance

Overall, I think writing off CSS frameworks is a bit of a hand-wavy statement to make given the huge landscape of tools out there right now. There will always be a place for prebuilt solutions like Material UI; if anything, I see them as one step removed from powerhouses like SquareSpace or Wordpress (closer to the code, but with a lot of details abstracted away). Also, for the sake of accessibility and developer speed, anything from Reach UI to Tailwind should fit the bill for some.

Still, keep hacking away my friend! I'm right there with ya 😁

Collapse
urielbitton profile image
Uriel Bitton Author

Good point, i general agree with most of the things you say. However, many beginners use css frameworks and that is simply self-damaging. CSS frameworks are best used by experienced developers working on large business projects alone without a team to help the developer. This i can understand. What i can't understand is when the framework is being used to build simple websites for clients and small passion projects.

Collapse
bholmesdev profile image
Ben Holmes

I totally agree; frameworks aren't the best fit for every use case. I've built quite a few projects recently without any frameworks at all since I'm a CSS warrior at heart.

Still, there's something to be said for utility frameworks like Reach UI on this front. These are perfect for nailing accessibility guidelines out of the box, but still leaving the door open for custom CSS on top. Very little is left to the imagination! It just gives you a baseline to work from, and guides you on custom styling (with documentation!) using simple CSS classes.

I really like the direction of these frameworks in particular over powerhouses like Material UI (which you probably had in mind when writing this post). Still, to each their own.

Collapse
athomsfere profile image
Austin French

But many new developers also get thrown into the deep-end of a full stack.

When it comes to data integrity, solid business logic, a good view (HTML, Js) and CSS, writing custom CSS when something like bootstrap does most of it OoB... Choosing to write your own is potentially the least important and impactful to the product owner and technical leads. I'd agree with them most of the time too. Far too often the CSS is the worst written 'code' of an application. Where I go from "This site looks pretty good" to "Holy hell, how is this maintained?"

Collapse
coopercodes profile image
🧸 🏳️‍🌈 cooper-codes 💻 🎮

Hell yes!

Let's delete the original post and replace it with this.

Collapse
nomade55 profile image
Lucas G. Terracino

This should be a post itself. Very good insight.

Collapse
bholmesdev profile image
Ben Holmes

Well, I took your suggestion. Decided to turn this comment into a longer-form post 😁

Collapse
lamambasan profile image
San Lamamba

Very good of breaking down the problem 👌🏾