Why I stopped using CSS Frameworks, Should you too?

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

Buttons in Bootstrap
Buttons in MaterialUI
The appearance of Input Box in Bootstrap
Similar default Appearance of Input Box in MaterialUI

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.

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

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

  1. 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.
  2. 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
  3. 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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store