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 😁
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.
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?"
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.
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 😁
Hell yes!
Let's delete the original post and replace it with this.
Very good of breaking down the problem 👌🏾
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.
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?"
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.
This should be a post itself. Very good insight.
Well, I took your suggestion. Decided to turn this comment into a longer-form post 😁
Understanding the spectrum of CSS frameworks
Ben Holmes ・ Oct 21 '20