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. 🏃🏻♂️
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.
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 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.
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, I didn't use any external frameworks, and see the difference.
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.
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.
Check out this pen. Using just a few lines of code, you too can make awesome responsive pages like this.
- A Complete Guide to Flexbox - CSS tricks
- Flexbox CSS In 20 Minutes - Traversy Media (Video)
- Basic concepts of flexbox - MDN (All time favorite)
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 - CSS tricks
- CSS Grid Layout Crash Course - Traversy Media (Video)
- Basic Concepts of grid layout - MDN
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:
If you still find it difficult to find CSS for some UI element, then use your old friend Inspect Element. 😊
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, 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. With this, you don't need to download Animate.css, just copy the code snippets and you're good to go.
Will share full story soon 😃
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.
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.
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.
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!
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!