CSS Frameworks in Vogue, But Don’t Forget Style Fundamentals

Those of you old enough to remember the web in the late 1990s will recall the nightmare experiences of coding in CSS (cascading style sheets) during that time, largely because of browser incompatibilities. But we’ve come a long way since then. As CSS pioneer Eric Meyer put it in a recent blog post, the web of today, including CSS, has “vast capability and wide compatibility.” He added that the tipping point for CSS was in April 2017, “when four major Grid implementations shipped in as many weeks, and were very nearly 100% consistent with each other.”

CSS Grid Layout is a responsive web design technique that is the modern equivalent of using HTML tables to control layout. Grid became available in Google Chrome in January 2017, and although it’s still in draft status at the World Wide Web Consortium (W3C), is well on its way to becoming a web standard.

As Meyer noted, we have web standards advocates like the Web Standards Project (WaSP) of the late 90s through till about 2013, and the W3C’s CSS Working Group of today, to thank for the healthy state of CSS. But also the leading browsers of this era — Google Chrome, Firefox, Safari, and Microsoft Edge — are all mostly compatible with each other when it comes to CSS.

The Rise of CSS Frameworks

Another fascinating trend has been the continual rise of CSS frameworks like Bootstrap, Materialize CSS and Tailwind. 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, an independent report run by Sacha Greif and Raphaël Benitte, 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.

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 of implementing a grid layout.

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.

Tailwind relies on utility classes, which Michelle Barker has defined as “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 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.”

CSS Framework Critics

Although Tailwind is the trendy new CSS framework, it’s not without critics. As CSS book author Ahmad Shadeed noted, “when the markup and styles are mixed [in HTML], things can get messy if you work on a complex multilingual, responsive, and themeable UI.”

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, “Nonsemantic classnames that refer to visual styles will always be a bad idea.”

That’s the appeal of CSS frameworks, I guess.

— Eric Meyer of House Moderna (@meyerweb) June 16, 2020

Another problem — or advantage, depending on your point of view — is that both Bootstrap and Tailwind make heavy use of JavaScript. It’s a common theme in today’s web development world to use JavaScript to add powerful interactive capabilities to your website or app. As Barker put it in her article about utility classes: “Because Tailwind is configured with Javascript, you can do things like writing functions and passing them into your config.”

The drawback, of course, is the added complexity that JavaScript brings. Why over-complicate an already complex web standard in CSS?

If you had told my early 2000’s self that CSS would be a bedfellow of JavaScript 20 years later, I’d have been surprised. In those days, I hand-coded CSS on my websites and regularly visited the CSS Zen Garden. CSS was for presentation, and JavaScript was for interactivity — it was a clean separation of concerns at that time. (Aside: In 1996, Netscape tried to marry JavaScript with style sheets by inventing a JavaScript-powered styling mechanism called JavaScript-Based Style Sheets (JSSS). It even submitted this to the W3C, as an alternative to the then-nascent CSS project. Predictably, JSSS was quickly swept under the carpet and never heard of again. But perhaps it would be popular if released today!)

As with JavaScript frameworks like React and Vue, the bigger philosophical question is whether the popularity of CSS frameworks has led to a generation of web designers who don’t understand the fundamentals of the web — like CSS. Because frameworks like Tailwind and Bootstrap are an abstraction layer over CSS code, they essentially hide that code from designers and developers. Out of sight, out of mind.

Jen Simmons, an evangelist on Apple’s web developer experience team, and also a member of the W3C CSS Working Group, summed it up nicely when she tweeted, “Why memorize Tailwind classes when you could memorize CSS properties instead?”

We all do learn 3rd-party tools/frameworks & those tools change. For me, that was WordPress, jQuery, Drupal… but I also learned HTML & CSS at the same time.

Memorizing a “replacement” to CSS or HTML instead of the real thing seems dangerous, especially for a junior developer.

— Jen Simmons (@jensimmons) May 12, 2021

Conclusion

Jeffrey Zeldman argued in 2018 that while frameworks are undoubtedly useful, a web designer can also accomplish a lot using plain CSS. He talked about how CSS Grid is not as hard to learn as people think and is often an alternative to frameworks.

“You can use it to accomplish all kinds of layouts that used to require JavaScript and frameworks, plus new kinds of layout nobody’s even tried yet,” he wrote.

The reality, though, is that designers and developers will mix and match the use of frameworks with emerging web standards like CSS Grid. Which is the sensible approach; the danger is when you become overly-reliant on frameworks and don’t learn the fundamentals below the abstractions.