NEW

Prismic offers an ideal solution to feature your e-commerce products in your promotional landing pages or inspirational content. View more

How to Choose the Best CSS Framework: Understanding Metrics and Context

Written by Anthony Campolo in
concept
on April 20, 2022

What different kinds of CSS frameworks are available and what do developers expect from them? How should a developer evaluate and select the best CSS framework? How would a developer even know that they need a framework at all?

In this article, we’ll examine each of those questions by comparing prominent CSS frameworks. We’ll start with key metrics and then look at the frameworks in roughly chronological order to see how each approach throughout history was an attempt to respond to the style before it.

Here for quick answers? Jump to the TL;DR ⏭️

Data and How Frameworks Were Selected

Open source metrics can be hard to properly gauge but can also provide invaluable insight that goes beyond developer preferences. The number of open issues or frequency of pull requests can provide the illusion of more problems or more productivity than actually exists.

GitHub stars and weekly NPM downloads can also be misleading but, in my experience, provide a useful metric for determining the relative magnitude of difference in the popularity of one CSS framework versus another. As in, a project with 11,100 stars is likely not meaningfully more popular than a project with 11,050 stars. But both projects are significantly more popular than a project with 50 stars or 200 stars. They are more popular to the extent that there is a magnitude of difference between the number of developers battle testing, QA'ing, and contributing to the project.

Another useful metric is the length of time a project has existed and how recently it has had its last commit. With the rapid evolution of CSS and the web platform in general, it is unlikely that a project that hasn't received any commits in years will be able to compete or remain relevant.

(Note: Dates of most recent commits and weekly NPM downloads in the image below were sampled on March 28th, 2022.)

Bootstrap was released on April 27, 2011, was most recently committed to on March 28, 2022, and has 155,000 GitHub Stars and an unpacked bundle size of 8,650 kB. Foundation's initial release was October 13, 2011, most recent commit was December 5, 2021, and it has 155,000 GitHub stars and an unpacked bundle size of 8,650 kB. Pure CSS was initially released on April 22, 2013, was most recently committed to on March 28, 2022, and has 22,200 GitHub Stars and an unpacked bundle size of 250 kB. Materialize was initially released on September 12, 2014, was last committed to on June 1, 2020, and has 38,700 GitHub stars and an unpacked bundle size of 1,490 kB. Material UI was initially released on August 18, 2014, was last committed to on March 28, 2022, and has 77,000 GitHub Stars and an unpacked bundle size of 9,060 kB. Tailwind CSS was initially released on July 20, 2017, was last committed to on March 28, 2022, and has 53,100 GitHub stars and an unpacked bundle size of 4,170 kB. Bulma was initially released on January 23, 2016, was last committed to on March 2, 2022, and has 45,000 GitHub stars and an unpacked bundle size of 1,320 kB. styled-components was initially released on August 16, 2016, was last committed to on March 24, 2022, and has 36,200 GitHub Stars and an unpacked bundle size of 3,420 kB. Emotion was initially released on May 26, 2017, was last committed to on March 10, 2022, and has 14,700 GitHub Stars and an unpacked bundle size of 6 kB. Stitches was initially released on April 14, 2020, was last committed to on February 25, 2022, and has 5,100 GitHub Stars and an unpacked bundle size of 521 kB. vanilla-extract was initially released on February 25, 2021, was last committed to on March 24, 2022, and has 5,100 GitHub stars and an unpacked bundle size of 291 kB.

Classic CSS Frameworks (2011 - 2014)

Many of the features CSS developers rely on today, such as flexbox and grid, did not exist in the first half of the 2010s. Instead, responsive grid systems were implemented in the user space by CSS frameworks. These frameworks helped inform the evolution of CSS as a language.

Bootstrap

Bootstrap provides CSS-based design templates for typography, forms, buttons, navigation, and other common UI components. It was created and open-sourced by Twitter in 2011 and emphasizes responsive, mobile-first design. It is massively popular with over a hundred thousand GitHub stars.

Developers have built careers out of learning Bootstrap, while others have derided it for making large swaths of websites look nearly identical. It gives helpful defaults but makes it challenging to customize when you want to deviate from the provided components.

Foundation

Despite its drawback, in many ways, Bootstrap is the litmus test against which all other CSS frameworks have been judged. This can be seen in the next framework, Foundation, which is almost a direct response to Bootstrap.

It also includes common UI components like Bootstrap’s but focuses more heavily on giving the developer the ability to customize the components. It was created and open-sourced by ZURB in 2011 as an alternative.

Materialize

Materialize is a CSS framework based on Google's Material Design system. It uses more advanced lighting and shadow effects to evoke the look and feel of physical objects.

This creates a more immediate and tactile feeling for the websites that employ it. It has proven to be a highly influential approach, but the library itself hasn’t received updates in a few years and receives few weekly NPM downloads.

Material UI

Material UI takes cues from Material Design but is designed to work specifically with React applications. Unlike Materialize which has mostly fallen by the wayside, Material UI has become of the most highly used CSS frameworks with over a million weekly NPM downloads.

Pure CSS

Pure CSS is a set of small, responsive CSS modules that aim to provide a starting point for most common websites. It has one of the smallest bundle sizes of any framework in this article and can also be further code split if the entire library is not being utilized.

Newer CSS Frameworks (2015 - 2017)

As features from the first generation of CSS frameworks began to be brought into the official CSS language, newer CSS frameworks placed a greater emphasis on small bundle sizes, modularity, and customizability.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows you to rapidly build custom user interfaces directly in markup files. It has proven to be divisive across the developer community.

Proponents claim that it provides a useful level of abstraction for quickly creating styles without needing to dig into the guts of the over five hundred available CSS properties. Detractors claim it unnecessarily abstracts away a perfectly capable language only for the sake of developers who don't want to spend the time to properly learn it.

As with most extreme and polarized technical debates, the answer lies somewhere in the middle. Another common saying from Tailwind proponents echoes a saying from the early React days: "just give it 5 minutes." You'll have to buy into the framework's specific conventions, but doing so can enable a strong developer experience.

Bulma

Bulma provides ready-to-use front-end components like those of Bootstrap and Foundation but uses newer CSS primitives like flexbox under the hood. Bulma emphasizes that it is "environment agnostic," meaning that it is just the style layer on top of the logic.

Since it is only a collection of CSS classes, it does not include any JavaScript. Sass is used to generate a single CSS file. The developer can modify this CSS file, edit the Sass itself, or create a cheat sheet with most of the elements that are available, including navigation, typography, boxes, grid system, forms, tables, etc.

CSS-in-JS (2017-2022)

In the second half of the 2010s, web development became heavily influenced by JavaScript component frameworks like React and Vue. This led to CSS libraries that allowed developers to manipulate styles programmatically by including CSS in their JavaScript components.

styled-components

styled-components is one of the pioneering projects that inspired future CSS-in-JS libraries. It is still the most popular CSS-in-JS library by GitHub stars and weekly NPM downloads.

While it was originally designed specifically for the React ecosystem, styled-components can also be used with other frameworks like Vue or vanilla JavaScript.

Emotion

Emotion took cues from styled-components but improved performance and has a smaller bundle size. However, styled-components has improved performance in the meantime and the two project’s APIs have mostly converged.

Stitches

Stitches attempts to achieve similar functionality to previous CSS-in-JS projects but without shipping a large runtime. At around 500 KBs, it's comparable in size to Pure.css and about a sixth of the size of styled-components.

It provides a range of features including theming, smart tokens, css props, as props, utilities, and a fully-typed API. Since it’s newer than the previously discussed projects, it may continue to evolve as it gains greater adoption.

vanilla-extract

vanilla-extract also gives a CSS-in-JS type syntax but could more accurately be called CSS-in-TypeScript. As with Stitches, it has a very small bundle size. Like TypeScript in general, having type‑safe classes and variables enables your developer tools to more easily catch bugs or provide autocomplete.

The flip side is (like TypeScript in general) you will have to spend more time fighting TypeScript compiler errors and configuring a build process. Developers can sometimes be philosophically opposed to one or the other, but ultimately you must decide how important the benefits of static typing are for your particular use case and coding style.

TL;DR

  • If you want to go with the most tried and true, stable, and long-lasting CSS framework, then Bootstrap is still going to be an unbeatable choice.
  • However, if you want something more modern and with more of a utility-based approach then Tailwind CSS should be your first stop.
  • If you find that neither quite feels right or that you would prefer to have greater control over the componentization of your styles and integration with frameworks like React and Vue, then styled-components could be a better fit. Stitches and vanilla-extract are worthwhile experiments but are still too new to be truly battle-tested yet.
  • For each of those options, you can find slight variations and competitors like Foundation, Material UI, Pure CSS, and Bulma. These are worth exploring if you really want to dig into the pros and cons of each approach. You would also want to study them all if you are interested in building your own CSS framework.

The average developer will likely find their use case handled well by either Bootstrap, Tailwind, or styled-components. If not, then you might want to just write your own CSS after all.

👏 Special thanks to Travis Waith-Mair for providing feedback and technical consultation on this article.

A portrait of Anthony Campolo in a blue shirt, smiling.

Anthony Campolo

Anthony Campolo is a Developer Advocate at StepZen, a member of the RedwoodJS and Slinkity core teams, and co-host of the FSJam Podcast. He contributes articles, podcasts, and presentations about various open-source tools and frameworks.

More posts