The Rise of CSS Frameworks<\/h2>\n
Another fascinating trend has been the continual rise of CSS frameworks like Bootstrap<\/a>, Materialize CSS<\/a> and Tailwind<\/a>. The first two are now nearly a decade old. Tailwind is the new kid on the block, having launched in November 2017. According to the 2020 State of CSS report,<\/a> an independent report run by Sacha Greif<\/a> and Raphaël Benitte<\/a>, Bootstrap is by far the most used CSS framework — 86% of survey respondents use it, compared to just 33% for the second most popular framework, Materialize CSS. But Tailwind was ranked highest in satisfaction (87%) and interest (62%). Notably, Bootstrap was near the bottom in both measures.<\/p>\n
There are some key differences between Bootstrap and Tailwind (to pick the two most talked-about CSS frameworks). Grid layout is one of them. Tailwind supports CSS grid, but Bootstrap has an alternative system<\/a> of implementing a grid layout.<\/p>\n
But the fundamental difference is that Tailwind has a “utility-first” approach, while Bootstrap is a CSS “toolkit” with predefined components, many of them JavaScript-powered. The idea is that it’s easy to quickly start up a new website or app with Bootstrap by choosing from its library of components. Tailwind is a lower-level abstraction, so it offers more flexibility in design.<\/p>\n
Tailwind relies on utility classes, which Michelle Barker<\/a> has defined as<\/a> “CSS class names that serve one particular purpose, and are named as such.” She gives the example of the .bg-blue class, which defines the background color as blue. The Tailwind documentation lists a whole range of background color utilities<\/a> along with styles you can apply to them (hover, focus, etc.). In Tailwind, everything is done within the HTML file rather than in a separate CSS file. Tailwind’s tagline sums it up nicely: “Rapidly build modern websites without ever leaving your HTML.”<\/p>\n

CSS Framework Critics<\/h2>\n
Although Tailwind is the trendy new CSS framework, it’s not without critics. As CSS book author Ahmad Shadeed noted<\/a>, “when the markup and styles are mixed [in HTML], things can get messy if you work on a complex multilingual, responsive, and themeable UI.”<\/p>\n
Some influential people in the web standards community also don’t like utility classes because they lack semantics. As Jeffrey Zeldman wrote several years ago<\/a>, “Nonsemantic classnames that refer to visual styles will always be a bad idea.”<\/p>\n
\n
That’s the appeal of CSS frameworks, I guess.<\/p>\n
— Eric Meyer of House Moderna (@meyerweb) June 16, 2020<\/a><\/p><\/blockquote>\n