Utility frameworks (think Tailwind CSS) have been profound in how we shape and ship our markup—with speed. The promise of "rapid prototyping" was too good to pass up: crucial if you are a freelancer or an agency developer, where the best method is one driven by speed, not necessarily the best practices (well... all practices are subjective).
Yet beneath this development approach lies a problem that has quietly taken root: the nameless crisis—a crisis of clarity.
While these trends brought economic benefits—thanks to faster prototyping and time-to-market—we now find ourselves drifting further from one of the core tenets of web development principles: semantic clarity—something the OGs like BEM preached us to adopt.
Our markups, once self-explanatory and structured, have become increasingly opaque. The component names we once relied on to describe the purpose of our components are being replaced with just strings of style-related shorthand... burying the intent of the code beneath a chaos of classes.
<div class="flex items-center justify-between p-4 bg-blue-500 text-white rounded-lg shadow-md">
<!-- Content -->
</div>
Imagine, for instance, opening a project that you, a team member, or perhaps another developer worked on in the past.
Where you once might have found meaningful names—indicators of what a component is supposed to be—you now have cryptic (okay, "cryptic" might be a bit unfair) combinations of utility classes.
You stare at the code, trying to make sense... Is it a standalone component or part of a larger one? A shared component? A header, perhaps (luckily, they used the HTML nav tag here)? — So, a sidebar card? Most importantly, where do I find the file to make one minor tweak?
The Problem:
When you abandon semantic naming, you essentially strip away the cues that developers—and even future-you—need to understand what your code is meant to do. Not to mention, onboarding a new developer for a quick fix becomes an expensive task.
This also touches on a deeper principle we've long upheld—writing semantic HTML that not only renders correctly but communicates meaning. When we remove the semantic layer—that we've fought to build—in the name of speed, we make our code less sustainable in the long term, essentially making iterations more "expensive" and our coding practices "fragmented".
The solution isn't to reject these utility-first frameworks outright. Tailwind has long been a staple in my starter kit and a preferred framework whenever I spec out a project. The speed and efficiency they offer are undeniable.
A pragmatic solution?
The solution here is to balance our practices with the timeless principles: Consider pairing your utility classes with descriptive class names that clearly communicate the purpose or origin of each component—even if you don't maintain external CSS that references those class names.