I started learning CSS in 2007. Yep, we’ve gone a long way since then!

In 2021, the frontend grows too fast. It’s hard and time-consuming to do CSS from scratch for each project. Not to mention, choosing the right CSS framework is not an easy task too.

I often see junior frontend or backend developers asking: what’s the best CSS framework?

So after learning and using a lot of CSS technologies over the years, I wanted to share with you what I think is the best CSS UI framework today.

There are 3 kinds of CSS frameworks

Before we dive in, you need to understand the 3 different kinds of CSS frameworks. It’s important to make the right choice.

1) Preprocessors & CSS transformers

These are build-time frameworks, they do not output CSS by default.

They add features that do not exist and are used to write CSS faster.

The famous ones I used are: SASS, Less, Stylus and PostCSS.

Each has other frameworks or plugins based on them. For example, there’s Susy written in SASS to create grid layouts faster.

You will often see them included in frontend frameworks or boilerplates.

They are not CSS UI frameworks.

2) UI Kit & Component-based CSS frameworks

These are the most used CSS frameworks.

They come with a prebuilt and opinionated UI. This is the fastest way I know to create interfaces with CSS.

But they have their cons too. The HTML structure is mostly predefined and the design isn’t always easy to customize.

In a nutshell: they are very opinionated.

The ones I’ve used since 2011: Bootstrap, Foundation, Skeleton, Materialize, Milligram and Bulma.

3) Atomic / Utility-first CSS frameworks

Atomic CSS and utility-first CSS are very similar concepts, I would even say the same, and it became very popular in the last 3~4 years.

The 2 main reasons are: React with styled-components and Tailwind CSS.

In a nutshell: both concepts consist of writting CSS classes or properties directly on the HTML.

So it’s very flexible, you can create the HTML structure you want, but it’s way slower to build a UI with it, than with component-based CSS frameworks.

If you have read other articles of mine, you know where I’m heading.

Okay, so what’s the best CSS framework then?

For me, the best framework depends on 3 things: design, time, team.

• If design is common / no design: Bulma or Bootstrap
• If design is complex & I have time: Tailwind CSS
• If design is complex & I don’t have time: Bulma + a lot of custom CSS
• If I need to create a design system: Tailwind CSS

Depending on my team’s size and skills, I would not choose the same tool, and in some very rare occasions, I would do CSS from scratch.

As you can see: there’s no perfect framework in all situations.

For most scenarios like webapps, admin dashboards & common landing pages, a component-based framework like Bulma is perfect.

For specific landing pages or very design-focused pages/webapps, a utility-first framework like Tailwind is perfect.

Okay, why Bulma over Bootstrap and the others?

• Foundation is old and the default design is harder to customize
• Bootstrap 4's JS part relies on jQuery, but v5 seems promissing
• Skeleton and Milligram are way too basic for most projects
• Materialize is too opinionated and a bit outdated IMO

Bulma PROS:

• It has a lot of components for most cases
• It’s clean by default & pretty easy to customize with SASS
• It has it’s own set of utility-classes, so best of both worlds
• You only load what you need and tt’s easy to extend
• The doc is clear & easy to read (important)

Bulma CONS:

• Everything isn’t customizable, in some scenarios you need to make CSS overrides

Why Tailwind over things like Styled-components for example?

Tailwind CSS has a great doc and is always improving!

They added CSS gradients, native grids & transforms to utility classes which seemed at first impossible due to the number of possible combinations.

Tailwind CSS also have a lot of prebuilt templates based on it, like the official Tailwind UI among others.

CSS-in-JS or Atomic CSS frameworks like Styled-components and ACSS.io, do not look like CSS at all. Performance is a bit better though, because it creates the stylesheet on-the-fly based on what you write.

But I prefer separation of concerns over a slightly better performance.

Other utility-first frameworks I’ve tried like Tachyons we’re not natural enough too. Tailwind seemed the most natural and developer friendly.

Tailwind Cons:

• Compilation can be slow when your project grows, but the new JIT compiler will aparently fix that.
• It’s not adapted at all if you create apps that has to generate custom CSS like Canva or granular template builders like Webflow.

Conclusion

Bulma is for me the best component-based CSS framework, but I wouldn’t use it for specific designs or to create my own UI-kit or design system.

Tailwind is for me the best atomic/utility-first CSS framework if you need to create you own UI kit, design system or design-specific pages.

In both cases, you still need to write a bit of CSS for medium-to-large projects. There’s no silver bullet.

Bootstrap v5 which is currently in beta, seems very promising with it’s own set of SVG icons,

I hope this makes the CSS world a bit clearer for you.

PS: If you’re learning Vue and want to know how to create your own component library, checkout my course: https://courses.maisonfutari.com/mastering-vue-components-creating-a-ui-library-from-scratch?coupon=PRESALE

There’s a 55% discount for the presale.