DEV Community

Cover image for Do we really need a CSS Framework?
Sarthak Sharma for XenoX

Posted on • Updated on

Do we really need a CSS Framework?

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

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.

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.

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, 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.

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 pen. Using just a few lines of code, you too can make awesome responsive pages like this.


So take out some time today and learn about it. Here are some resources.

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.

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:

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, 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 ๐Ÿ˜ƒ

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

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.

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!

Top comments (64)

Collapse
 
codestuff2 profile image
Adam Whitlock • Edited

I'm really enjoying tailwindcss with it's utility classes I barely need to touch css and can create almost any custom look I want. Plus with purge css I can remove all unused css during the production bundling. I really enjoyed the article though and for smaller projects I like to stick with css grid and a few simple classes. Thanks for writing!

Collapse
 
geenious profile image
Jeff Irwin

Our team has been using TailwindCSS in our projects for the last 6 months or so. It's fantastic once you get past the feeling that you're writing in-line styles. And the config file is easily tailored for each project. Purge CSS is a must when building though.

Collapse
 
codestuff2 profile image
Adam Whitlock

I have been using purgeCSS as well. I'm glad im not the only way who felt like I was writing inline css :) I literally just had someone on my team ask me today why it was any better than inline css lol. I showed him purge, and also the idea of classes created with the @apply and he had a minor "ah ha" moment.

Collapse
 
edisonywh profile image
Edison Yap

How is working with Tailwind like? I've heard a lot about it being "utility", but I'm not quite sure what that means; to me it sounds like you'd need to customize all of your components from scratch, which kinda defeats the purpose?

I'm like 99% sure I'm wrong, so curious what you think - is there a lot of work to do for the styling before I can jump into developing my actual application?

Collapse
 
codestuff2 profile image
Adam Whitlock

Essentially you do "customize" the components in your site from classes so a simple rounded button would have quite a few classes. Something like

shadow bg-blue text-white font-light py-1 px-2 border border-white rounded-full

... but that is more or less how you can build your button the first time during prototyping, and then you can take all those classes once you have the specific style you are looking for dialed in and just create a new class called "button-blue" and use the @apply rule to make a single class that inherits all those properties

.button-blue {
@apply shadow flex-1 bg-white text-teal-dark font-light py-1 px-2 border border-white rounded-full;
transition: 0.3s;
}

that is just one use case. There are easy ways to add your own css "plugins" for things like gradients, svgs, and more advanced things where needed.

I feel like just having to deal with a single set of classes instead of having to remember all the random custom classes you created can be easier.

As far as a strict utility side goes, there are many easy classes you can use for margins, padding, flex, widths, and other properties. That was if you just need to add some margin-top to an element you can easily add a mt-4 class and not have to jump into the css itself.

Thread Thread
 
edisonywh profile image
Edison Yap

Cool man! Maybe one of these days I should take a look into it.

I found this Twitter BTW, looks super dope.

twitter.com/bradlc/status/10841989...

Thread Thread
 
codestuff2 profile image
Adam Whitlock

More linting stuff to keep me from writing broken code! :) That does look awesome for sure.

Collapse
 
jrock2004 profile image
John Costanzo

I started to get into tailwind till I started to notice a trend that I had to start writing so many css classes in my html files. Another thing is something as simple as a button, I need to add css classes to make an input look like an input. I think that framework maybe went a little too much utility

Collapse
 
giorgosk profile image
Giorgos Kontopoulos ๐Ÿ‘€

I have been meaning to start using tailwindcss in my projects but I always postpone it because of time contstraints, I guess its time to start.

Collapse
 
sarthology profile image
Sarthak Sharma

Thanks Adam ๐Ÿ˜Š

Collapse
 
ben profile image
Ben Halpern

I crashed and burned on feeling any css framework benefit a few years ago. I was just never able to make really good use of them.

I can't say exactly why or why not frameworks make sense in general, but I do know I don't feel a lot of love for them from experience. It's all anecdotal and I wouldn't come on to an existing project demanding we start over with CSS.

That being said, I've seen some CSS frameworks I like in theory. Tachyons is pretty cool. But I've never had a lot of personal success with frameworks in this area.

Collapse
 
sarthology profile image
Sarthak Sharma

Agree with you but again depends on person to person I would say. Let's say if your user is in a remote location where speed is in between 2G-3G, shrinking on that 200k can provide a whole different experience. It's all about priorities my friend. ๐Ÿ˜Š

Collapse
 
chiangs profile image
Stephen Chiang

Thanks to flexbox and SASS, I always roll my own using BEM. I've completely abandoned CSS frameworks and I get frustrated at the bloat when I pick up a project that had included some framework with overrides to the overrides that overrided the overrides.

Collapse
 
gzuzkstro profile image
Yisus Castroโœจ

I stopped using frameworks such as Bootstrap when I noticed that I had to spend a lot time overriding CSS rules of the theme in order to achieve a specific design, that I knew exactly how to pull off with vanilla CSS ๐Ÿง

I don't know if I should feel guilty because I don't know what can/can't do the frameworks right now, it's been a while since I dropped them ๐Ÿค”

Thanks for the snippet resources ๐Ÿ˜„

Collapse
 
sarthology profile image
Sarthak Sharma

๐Ÿ˜Š

Collapse
 
ryansmith profile image
Ryan Smith

I'm in favor of having good HTML and CSS skills before considering a CSS framework. Bootstrap reminds me a bit of jQuery in a sense that you could skip learning standard JavaScript in the browser in favor of jQuery. It creates some "knowledge debt" because knowing Bootstrap or jQuery is not the same as knowing the underlying languages. Now that jQuery and possibly Bootstrap are declining in popularity, not having those fundamental skills becomes an issue when your teams move away from them.

Collapse
 
peiche profile image
Paul

What I see among my programmer coworkers (who are nearly all back-end people) is a liberal use of Bootstrap classes without any knowledge of what those classes do.

Collapse
 
sarthology profile image
Sarthak Sharma

could skip learning standard JavaScript in the browser in favor of jQuery.

Can't agree more.

Collapse
 
torpne profile image
Kevin McKenna

The ugly truth to why we need bootstrap right there..

We are either too lazy or too busy to spend the time making a custom setup.

At the end of the day, it makes our lives easier, and while I can't speak for everyone, having one less thing to worry about when I'm on a tight deadline is nothing but good.

Collapse
 
otanriverdi profile image
ร–zgรผr Tanrฤฑverdi • Edited

The main reason, I believe, these frameworks are so loved is the daunting nature of CSS for the beginners and I believe they just get so used to them that they never bother to learn proper CSS without it.

That is why, even though they are still highly practical and fast to work with, beginner developers should really avoid them until they are comfortable with vanilla CSS.

Collapse
 
gsto profile image
Glenn Stovall

The main benefit I see to CSS frameworks is development speed. I agree that with advancements in CSS (flex, grid) and tools to find UI components like Codepen, devs definitely have more options. However, having a solid UI kit out of the box means you can start workshopping ideas fast.

It's highly dependent on the project. I speak from working in consulting where I hammered out MVPs was the name of the game. In that scenario, putting performance ahead of development speed is premature optimization.

However now, I'm working on a more mature product, one that grew from an MVP. It's using Bootstrap (for now). However, now that we have the customer base to justify investing more in design and performance, we're working on adding more of our own styles while removing Bootstrap defaults. Ideally, I'd like to start removing Bootstrap components as they become obsolete, and eventually "unframework" our CSS.

Collapse
 
sarthology profile image
Sarthak Sharma

Perfect case scenario of approximately every project that starts off with bootstrap. Everything is good until you try to grow.

Collapse
 
torpne profile image
Kevin McKenna

On the other hand, if you can't initially get the project out the door on a tight deadline and without hiring extra people, you run the risk of there not being a project to grow.

It's a nice problem to have compared to the alternative I think

Collapse
 
stephanie profile image
Stephanie Handsteiner

I tried using CSS-Frameworks but something always threw me off. I don't know, maybe it's just that I'm way faster writing the CSS from scratch and document that for the others on the team than I would be using a framework.

Collapse
 
sarthology profile image
Sarthak Sharma

Wow, You are ninja man. ๐Ÿ˜ƒ

Collapse
 
papagoat profile image
Terence Lucas Yap

Great article. The challenge comes when developing on legacy applications but if it is a new project, we tend to not use CSS Frameworks as well. Most of the time we are just lazy. ยฏ_(ใƒ„)_/ยฏ

P.S. The link to Animatopy is wrong though. Shouldn't it be sarthology.github.io/Animatopy/ ( อกยฐ อœส– อกยฐ)

Collapse
 
sarthology profile image
Sarthak Sharma

Damn! Edited now. Thanks man.

Collapse
 
papagoat profile image
Terence Lucas Yap

So I created this just for the lulz. github.com/Papagoat/gulp-flex-sass

( โ€ขโ€ข)
( โ€ข
โ€ข)>โŒโ– -โ– 
(โŒโ– _โ– ) #Yeeeaaahhh

Thread Thread
 
sarthology profile image
Sarthak Sharma

What's this ?

Collapse
 
fabiorosado profile image
Fabio Rosado

This is the reason why I decided to write my own css on my personal site and on opsdroid site - plus it was a good way to learn.

I was able to make the css pretty small with that.

If you do need to use a framework I quite like bulma because you can just get the sass you need and then mix/match

Collapse
 
sarthology profile image
Sarthak Sharma

Quite recommended in this post, have to check bulma. ๐Ÿค”

Collapse
 
fabiorosado profile image
Fabio Rosado

I quite like it, it takes a while to get used to the names if you are used to bootstrap but I find it more intuitive as well

Thread Thread
 
sarthology profile image
Sarthak Sharma

That's awesome.

Collapse
 
julesmanson profile image
jules manson

Loved the post. And I agree with it 100%. Most of my projects are small and for the browser only so I vanilla almost everything including all CSS and most Javascript. No jQuery or Bootstrap here. They go against every fiber in my body.

Collapse
 
sarthology profile image
Sarthak Sharma

๐Ÿ˜„ Nice.

Collapse
 
vitalcog profile image
Chad Windham

I worked on a massive application. We used the Angular framework and (especially because my boss was a HUGE bootstrap advocate) tried to leverage bootstrap. You know how much bootstrap we wound up using? Pretty darn close to 0%. Everything was custom designed to fit the specific task AND the "brand" that using bootstrap for just about anything slowed down the process.

In my opinion, if you have no intention of getting good at CSS, bootstrap is for you. (That is not intended as a criticism, CSS is surprisingly complex, and if it is just a small part of a "full stack" developers arsenal, it very well may not be worth their time to get "great" at it, and leveraging something like bootstrap could be a very smart way to handle it.)

If however, you are pretty good at CSS, bootstrap tends to become less and less valuable. For somebody like me, I honestly make custom, responsive UIs faster than using bootstrap (because I still have to read the bootstrap docs).

Collapse
 
sarthology profile image
Sarthak Sharma

Tools Angular-UI also make people go for bootstrap. But problem is that if you save time in beginning, it will take way more time when do modifications.

Collapse
 
silverman42 profile image
Sylvester Nkeze • Edited

My two biggest turn-off for css frameworks are
(1) The ones tied to a specific Javascript library
(2) The ones with class names i can hardly remember.
These are the major reasons i stopped using bootstrap a long time ago. These days, i am more relaxed using Tachyons or Bulma