Do we really need a CSS Framework?
Tags: css, webdev, javascript, beginners
Published: 2019-01-22 21:15:14

---
title: Do we really need a CSS Framework?
published: true
description: 
tags: css, webdev, javascript, beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/wn2o3rvsaxcqofoernpo.jpg
---

We're all well-versed with the capabilities and limits of Bootstrap. But of course, there once was a time when if somebody asked, "What's Bootstrap?", we were all like this 
![](https://media.giphy.com/media/l4FGlrnsf6xR3U2EU/giphy.gif)

That time is over now, and using CSS frameworks has become standard practice across the industry as they save us a lot of time. But the question I want to pose today is this: Do we *really* need them in 2019?

Perhaps not. 🤔

In this post, we will go through why you may not need a CSS framework anymore. Let's jump right into it. 🏃🏻‍♂️

## Unused CSS

I remember back when all we needed to do was add a `bootstrap.min.css` and voila! The production version of the app was ready... or so we thought.
Well, turns out that isn't really the case.

![](https://thepracticaldev.s3.amazonaws.com/i/pwy9dxbq9xpymdiw5d1m.gif)

Check out an example of this webpage. They are using Bootstrap for their landing page. We can see it's minified, but an interesting thing to notice here is more than **90% of CSS in unused**. Using the *coverage* tool in Chrome you can check that for any webpage. Just hit `cmd + shift + p` and type "coverage". 

And yes, Bootstrap does of course have tools like [Customize and Download](https://getbootstrap.com/docs/3.4/customize/) that let you choose components and decrease the size of the downloaded file, but still, a lot of code goes unused.

Check this brilliant talk by Addy Osmani on this subject. I highly encourage you to watch the full video, but if you want to save time, click [here](https://youtu.be/FEs2jgZBaQA?t=860).

{% youtube FEs2jgZBaQA %}

## Small Projects vs Big Projects 

The reason for Bootstrap getting popular was:

* Easy to make mobile friendly responsive designs.
* Decrease time in developing a big project.

So, if you are working on some big project and you don't have a skilled Front-End Developer in your team, then CSS Frameworks can save your day. But do you really need a CSS framework for small projects? I don't think so. When I was making [Dev10](https://github.com/sarthology/Dev10), I didn't use any external frameworks, and see the difference.
![](https://thepracticaldev.s3.amazonaws.com/i/ki6kolqit4aj3enify21.png)

The key is to evaluate your project scope wisely. If you don't have many UI elements and pages in your app, you don't need a framework.

### How to replace Frameworks in Small Projects?

Making mobile-friendly responsive design using vanilla CSS isn't just possible, it's easier to do than using frameworks, I think. Here are two CSS properties that are damn powerful.

##### 1. Flex
Check out [this](https://codepen.io/chriscoyier/pen/vWEMWw) pen. Using just a few lines of code, you too can make awesome responsive pages like this.

![](https://media.giphy.com/media/877GgxNwrEZRsJyv5T/giphy.gif)
So take out some time today and learn about it. Here are some resources.

* [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - CSS tricks 
* [Flexbox CSS In 20 Minutes](https://www.youtube.com/watch?v=JJSoEo8JSnc) - Traversy Media (Video)
* [Basic concepts of flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) - MDN (All time favorite)

##### 2. Grid

Taking out your simple CSS grid from frameworks and putting that on steroids, this is something that you all should learn. If you used to use Bootstrap only from grid system, use `grid` and make your own custom layouts.

* [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid) - CSS tricks
* [CSS Grid Layout Crash Course](https://www.youtube.com/watch?v=jV8B24rSN5o) - Traversy Media (Video)
* [Basic Concepts of grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) - MDN

##### 3. Use code snippets for UI components

Next time you get confused and want to get inspiration for UI elements like buttons and navbars, just visit Codepen. It's an awesome community and you can find hundreds of pens to help you with that. Other useful resources:

* [You-Dont-Need-JavaScript](https://github.com/you-dont-need/You-Dont-Need-Javascript) - Kind of a replacement for bootstrap.js
* [Best CSS Code Snippet Sites](https://www.awwwards.com/best-css-code-snippets-sites.html)

If you still find it difficult to find CSS for some UI element, then use your old friend *Inspect Element*. 😊

##### 4. Use Animation code snippets

*Cool info:* I stopped writing this article on 21st January because this article gave me the idea and inspiration to work on **Animatopy**. If you remember [animate.css](https://daneden.github.io/animate.css/), it was a great tool but the only problem was even if you wanted to use a few animations, you still had to include the complete CSS. 
I obviously find that unnecessary and frustrating, so I made [Animatopy](https://sarthology.github.io/Animatopy/). With this, you don't need to download Animate.css, just copy the code snippets and you're good to go.

![](https://thepracticaldev.s3.amazonaws.com/i/59gwcnxitzh77zzv3h2r.gif)

*Will share full story soon 😃*

##### Conclusion/Tl;dr
Here's the golden rule: if the project is small, keep it small and don't use frameworks. The only large size files allowed are images, and you should always try to optimize that too, not CSS.

If you have some other cool tips feel free to share that in the comment section below.


### But what about Big Projects?

This is easy to do if you're just starting out with a new project. But if you already have a big project up and running, this transition will be successful only if it's well-planned and discussed with your team. In this section, we will discuss a few tips for optimizing big projects. 

##### 1. Remove unused CSS from your project

Thanks to the awesome Javascript community, we have awesome tools to optimize CSS. One of those great tools that you can use in an existing big project is *purifycss*. It's available with

- [Grunt](https://github.com/purifycss/grunt-purifycss)
- [Gulp](https://github.com/purifycss/gulp-purifycss)
- [Webpack](https://github.com/purifycss/purifycss-webpack-plugin)

##### 2. Minify/Uglify use it all
There are other ways to further decrease the size of CSS, the obvious one being minifying it. There are already many posts about it, but here's a fantastic one to save your time.

- [Better CSS with JavaScript](https://medium.com/making-internets/better-css-with-javascript-88463deecf3) 

##### 3. Make CSS wiki or Documentation (if ditching Frameworks)

If you are determined enough to leave frameworks completely, then take the best thing from frameworks, well-written documentation. This way, developers can easily copy and paste the code snippets and save time. Believe me, it saves a lot of time so you and your developers can avoid those long bug lists generated by other developers. In the beginning, this can be intimidating, but this will benefit you in the long run. The best place to start is, of course, the documentation of these frameworks. All the best!

## Conclusion

Use frameworks or not, that's up to your discretion. The key idea is to use any of them well, follow the best practices, and keep checking new properties to replace with old ones. 

Well, that's it from my side, guys. I can keep going, but my job is to just ignite your thoughts so we can carry on the discussion in the comments below. Be ready with your own tips, tricks, and suggestions!

![](https://media.giphy.com/media/l1AvzJ4EjlflJHcfm/giphy.gif)