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