Why I stopped using CSS Frameworks, Should you too?
Should I use CSS Frameworks or should I write CSS from scratch? Should I rely upon opinionated UI Frameworks like Bootstrap or MaterialUI, or should go with emerging utility first frameworks like Tailwind and ReachUI.
If you are into web development and you are facing these kinds of questions, don’t worry even I was at your place.
Finding the right choice on these subjects where the world seems to split into two halves, where you feel caught up between the battle of “Pro CSS FrameWokers” vs “Anti-Framework-Stylists” is not easy.
Before we go into detail, I want to emphasize the distinction between Opinionated CSS Frameworks and Utility First CSS Frameworks.
Opinionated CSS Frameworks
These Frameworks provide us with out-of-the-box access to various styled-classes, variables, and sometimes even prebuilt components that can ease your life. You need a styled Input box, they have it, you need colorful alerts, ask no more, just include these components in your code and you are good to go. Bootstrap and MaterialUI falls under this category. But their default appearance is highly influenced by their creators
See the difference in the respective colors for Secondary Button in both cases. and box-shadow. It’s different, isn’t it? Let’s take another example
Can you see the difference? Yes, These look different.
Now people well versed with these frameworks might suggest, “we can make them look similar with some add-on properties”, and yes we can. But even then there stays the fundamental difference in their inherent behavior which might or might not favor your design schema or you might have to fight against it to override these. On other hand we have
Utility First CSS Frameworks
If you are familiar with Tailwind or Reach UI, Utility First CSS Frameworks provides a set of the skeleton as CSS classes or components, these can accommodate any design schema easily.
As mentioned on tailwind’s website
It’s a utility-first CSS framework for rapidly building custom designs. Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
one can assume Utility First CSS Frameworks as a collection of generic CSS classes like text-center or bg-white or components that we usually write in our projects, but here with these frameworks, such tools are readily available out of the box.
Custom CSS
Well here comes the old school way of designing your webpage with custom CSS codes, this is painful as we have to write nearly every bits and piece of CSS, or maybe sometimes some CSS boilerplate can come to rescue but still its what it is, Plain raw CSS that you write with your sweats.
Okay, I know these already, but what’s wrong with using Frameworks?
At this point you might be thinking the same, so let's go through the pros and cons of these
Opinionated CSS Frameworks like Bootstrap and MaterialUI are no doubt amazing, these let you start your project without any roadblocks, they provide you pre-built components and design schema which you can set up and start using in your project. these work perfectly if the design that you are trying to implement is in favor of their inherent design schema.
For example, the Grid standard of Bootstrap or say Material Schema of MaterialUI. However, if that’s not the case the effort it will take to make changes in the default schema will become a nuisance in itself, and eventually, you will end up writing a lot of custom CSS.
on other hand, a CSS Utility Library as a stylesheet comes with many classes available to do small things, like Classes to set colors, Classes to change layouts. Classes for sizing and spacing.
But they in essence brings whole design styling to HTML level rather than CSS level. Some styling information is applied directly in the HTML via the utility classes, and some styling is applied through your naming conventions and CSS. In a way, the HTML component now looks like a placeholder for a bunch of classes. Some people might like this initially, but in my opinion separation of concern of CSS and HTML becomes essential for long term projects
Also, these frameworks are quite heavy in size and this affects the page speed
So Should I start writing CSS from scratch and ignore every CSS library that can help me?
Well, there is no straight answer to this. it depends upon the scope of your project, design guidelines across the product, and most importantly the timelines. I use the following steps for making a decision
- One Timer / Small Project: Projects without specific design requirements, or where designs are in agreement with Framework’s ideology or projects with short delivery timelines; I would recommend using opinionated Framework as it will accelerate development and will let you focus on business logic more than CSS management. However, it might add up to bundle size.
- Mid-level projects: Projects that are going to be in “Development and Release Loop” for a while i.e, there will be iterative changes, and the feedback from customers or end-users might affect the look & feel of the product in the upcoming iteration. I would suggest, it would be sensible to use utility first CSS libraries. These will accelerate your development and still keep the scope of the design schema extension intact. You can anytime sprinkle some custom-made CSS. Using Utility First CSS Libraries will even help you maintain guidelines for CSS as all collaborators/developers need not create CSS classes which will help to avoid CSS duplication or collision
- Big Projects/Long-term Projects: These are the projects where such a decision becomes crucial. Most of the projects that I deal with falls under this category. And I have seen many projects where these dependencies have slowed down the entire development process. If UI Designs and Schemas are by those of opinionated frameworks, and no major deviation is guaranteed then it’s safe to go ahead with the CSS framework approach. However, If designers are providing designs that are either not suitable for opinionated frameworks, or for projects where standardization can not be guaranteed from Product or Designer Teams. It’s safest to go ahead with the custom CSS approach. It will be comparatively hard to start such a project and the first observable milestone might take time to be achieved, but in long run, it will pay you off, as you won’t be bound by any framework limitation. But remember this freedom comes at the cost of extra efforts in maintaining the codebase and strictly following some standards that can avoid duplication of codes.
Wrapping Up
CSS Frameworks help us to speed up the entire development process however, use them carefully wherever needed, else they might cause more nuisance than you imagined. Choose what’s best for you and your team and it must not become a barrier for other collaborators also shouldn’t affect code maintenance
Just remember your decisions now will decide the fate of the product, so take your time and happy coding.
