UI and CSS libraries, when does it make sense to use them?
Bootstrap, TailwindCSS, Material UI are all examples of tools created to help you put together UI quickly and efficiently, but should you bother to learn them?
Here how it may make sense for various groups:
Non-Frontend Developers
Backend developers or developers that just want to put together a view for an application they came up with without having to dive into the complex world of CSS, love these tools, and for them these tools are perfect!
CSS “Haters”
People who hate CSS either because of its inconsistencies, complexity or can't wrap their head around it, also see these tools as perfect for the job. Again, it makes perfect sense why so. These tools allow for these CSS “haters” to love the UI they build.
Team of developers & fast-paced environments
For developers working in teams and/or in a fast-paced environment benefit greatly from these tools, especially if these companies/teams have a mix of backend and frontend developers building websites or web-applications.
These tools increase the speed of development significantly which makes it for a faster and constant delivery without having to worry about the tiny details of CSS and only focus on the result.
Where it can fall apart is if these tools are somehow hard to learn, override, or maintain in case of bugs.
I have been in teams where we reached a point these tools started to become hard to work with in order to get a UI look because people just tried whatever without understanding CSS in a nutshell and the team had to learn something new quickly and use it immediately.
Hardcore Frontend Developers
Hardcore frontend developers often show some resistance to these tools as they reduce the challenge of building UI and removes the fun in working with CSS.
Hardcore Frontend developers will often prefer other tools like JSS, SASS, LESS, StyledComponents that still allows them to write CSS but with enhancements.
When you truly learn CSS your drive is to only find out more and keep learning which is a sign you fell in love with it. This was the whole reason people used to submit their styling to CSS Zen Garden and use CSS to create images of things with a single div, for example.
“Unconventional” way to style
These tools introduce a non-standard way to style things like Tailwind and Bootstrap do with their class-based styling.
HTML allows you to set style attributes on a tag for inline styling and it is not a popular way to style things. By allowing people to set multiple classes on a tag in order to style it may trigger the same feelings as inline styling when they get too big.
The community behind improving CSS
People behind bringing features to CSS and make it easier and easier to style things like introducing display flex and grid, variables, and CSS Houdini want to make things better for everyone. Even those people who create these tools.
CSS lovers look forward to these new capabilities and amazing tricks you can use to do some awesome things. Understanding CSS becomes addictive and people want more and more new stuff and way to do things.
Styling != Style/Theme System
Even if you know how to style a particular tag, it requires a lot of knowledge to create a style or theme system which requires a lot of work.
A developer can know how to style something with CSS and still struggle with the bigger picture and that's where these tools can help a lot. Tailwind, Bootstrap & Material all offer theming features that make things easier to change later on and reduce the pain in keeping things consistent.
Consistency is key and not having to rewrite everything when you want to change the theme and look of a website, later on, is a highly appreciated feature.
Bring the right tool for the job
If I have a small project of mine I would probably use plain CSS. If I wanted to prototype something quickly and still have it look good, I would use one of these tools.
If I work in a team environment and or a project most likely to scale, I would adopt a tool that will help me put out results quickly and apply changes later on easily.
Adopting the right tool too late may cost money and take time to implement, the same goes for using the right tool in a bad way. Whatever the tool you pick, take the time to understand its pros and cons against the task at hand and the people who will use it.
My take on this
I love styling In pure CSS and I tried Tailwind, Bootstrap, Material UI, and other similar options all because I work in environments that need them but I love styling my things with full control over details.
I do use SASS and other tools like PostCSS and PurgeCSS to help me with things but I am a pro user and a CSS lover.
Remain open minded about things and try to understand why some tools help a lot of developers out there and we want everybody to find a place in the web space. Knowing CSS is not a requirement for styling HTML anymore.
Use the tools you love and get better at them and don't let the popularity of tools like these pressure you to adopt them. Styling comfortably is more important.
Happy styling :)
