I was recently made aware of yet another article about how frontend web development has lost its way. Everything has become too complicated. The wisdom of the old web has been forgotten. Tailwind is corrupting our youth. While there is always some truth to these sentiments, all of this negative demagoguery is a detriment to the frontend community.
Back in my day
Twenty years ago, we lived and breathed “separation of concerns” and “the semantic web”. Tags like
<div id="header"> and targeted
#header in our stylesheet. Life was simple.
The web’s awkward phase
Our designs now needed to adapt to varying viewport sizes, dynamic content, user needs and preferences, device and network conditions, and more. Thankfully, we were gifted elements like
<footer>, as well as ARIA roles and attributes like
aria-label="Close" to aid us in our pursuit of semantic ideals. Despite all this, we still found ourselves writing
The truth of the matter is that user agents do not really care about supposedly semantic class names (with a few standard exceptions like microformats). If they did, we would not need
<center> is a false equivalence.
It is this realization that led some of us to create class names that represented visual building blocks like
.card. We could eliminate repeated CSS that was previously applied to elements that were visually similar, despite being semantically different. This ideology is the foundation of component-like CSS frameworks, such as Bootstrap and Semantic UI. And when
.btn-shadow also felt too repetitious to some of us, we factored out classes like
.shadow, which spawned Tachyons and eventually Tailwind. However, are these trendy utility classes really a better approach?
Who is wrong and who is right?
Unlike many of the hot takes, I do not think there is a timeless “proper” way to write HTML and CSS. I think we should simply strive for these goals:
- Make things as accessible as possible to our target users. This means using semantic HTML, adhering to the ever-changing standards as well as we can manage, and educating ourselves on the obstacles before us.
If you think Tailwind creates an ugly, confusing “class soup”, that is perfectly understandable. If you think clientside routing has no place in your project, you may be right. Your choice of React over Vue, tabs over spaces, and so forth are all valid choices. The right choice is the one that allows you or your team to deliver on your goals.
To continue to drive progress, we need to drop the negativity, the tribalism, and the pessimism. Tools, frameworks, and conventions will always change, and these changes will require us to be both cautious and open-minded. The heroes of the web are those who unite to forge the standards and features that we so clearly need.
Tamas reposted this.
Tamas mentioned this.