Honestly your reaction to Material long-term is my reaction to both it and Tailwind from the very start of the process.. This is because BOTH appear to have been created by people unqualified to write a single blasted line of HTML or CSS, and I constantly have to fight with them over establishing both accessibility and semantics.

As I said in my article “HTML / CSS Frameworks — Monuments to Ignorance, Incompetence, and Ineptitude” these systems vomit up garbage code and continue to gain in popularity entirely on propaganda, echo-chamber, and wishful thinking than they are FACTS. To the point they are predatory scam artist rubbish that prevents you from realizing just how badly you’re being saddled up and taken for a ride.

They are NOT easier than vanilla HTML/CSS/JS. They do NOT provide speedups in development time if you’re working on anything meaningful or more complex than a card stacked demo. They do NOT make collaboration “easier’ or make things better for those who “weren’t there when the project was built”.

How can I say this? By the simple fact that not even the examples on their own sites use proper semantics with their HTML being utter shite. By how they make you piss all over the markup with presentational classes undoing 20+ years of progress. By the simple fact they all seem to universally flip the bird at accessibility.

If you had provided code — even just the output — I could illustrate this better, but your lack of showing what either of them took to generate what you have and/or what they are vomiting up for HTML/CSS makes it hard to take your article all that seriously… so let’s take something like a simple “welcome card” modal the way some tailwind derp fanboy would do it.

<div class="bg-indigo-600 text-white rounded shadow-xl py-5 px-5 w-full lg:w-10/12 xl:w-3/4" x-data="{welcomeMessageShow:true}" x-show="welcomeMessageShow" x-transition:enter="transition-all ease duration-500 transform" x-transition:enter-start="opacity-0 scale-110" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition-all ease duration-500 transform" x-transition:leave-end="opacity-0 scale-90">
<div class="flex flex-wrap -mx-3 items-center">
<div class="w-1/4 px-3 text-center hidden md:block">
<div class="p-5 xl:px-8 md:py-5">
<img src="images/userWelcome.svg" alt="welcoming person">
</div>
</div>
<div class="w-full sm:w-1/2 md:w-2/4 px-3 text-left">
<div class="p-5 xl:px-8 md:py-5">
<h3 class="text-2xl">Welcome, Scott!</h3>
<h5 class="text-xl mb-3">Lorem ipsum sit amet</h5>
<p class="text-sm text-indigo-200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro sit asperiores perferendis odit enim natus ipsum reprehenderit eos eum impedit tenetur nemo corporis laboriosam veniam dolores quos necessitatibus, quaerat debitis.</p>
</div>
</div>
<div class="w-full sm:w-1/2 md:w-1/4 px-3 text-center">
<div class="p-5 xl:px-8 md:py-5">
<a class="block w-full py-2 px-4 rounded text-indigo-600 bg-gray-200 hover:bg-white hover:text-gray-900 focus:outline-none transition duration-150 ease-in-out mb-3" href="more.html" target="_blank">Find out more?</a>
<button class="w-full py-2 px-4 rounded text-white bg-indigo-900 hover:bg-gray-900 focus:outline-none transition duration-150 ease-in-out" @click.prevent="welcomeMessageShow=false;setTimeout(()=>{welcomeMessageShow=true},2000)">No thanks</button>
</div>
</div>
</div>
</div>

Actually converted from an actual Tailwind demo, but changed to protect the guilty. I also removed the equally stupid inlined SVG, aka “caching, what’s caching?!?”

What’s wrong with it?

Endless pointless DIV for nothing. Fairy tale made up attributes. Scripting only attributes crapped into the markup. Hooks for JavaScript to do things that are NONE of JavaScript’s flipping job any time after 2010. Endless pointless presentational classes for nothing pissing on the markup. Painfully and agonizingly cryptic classes where who the blazes can keep track of such idiocy as “py-2 px-4”.

Gets worse when you look at the semantics. This looks like a major subsection of a page so why is it starting with a H3 and not a H2? How the blazes can you have a H5 when there’s no H4 for it to even be the start of a subsection of?!?

Seriously, read my article “News Flash — You’ve Probably Been Using HTML Wrong” where I explain how heading orders are SUPPOSED to work.

Don’t even get me started about the accessibility /FAIL/ of using TARGET=”_blank” to shove new windows down the user’s gullet, in direct ignorance of why TARGET was deprecated in 4 Strict and really had little business being resurrected in 5.

These clowns clearly do not understand HTML or CSS enough to be telling others how to build websites, much less build “components” for people to blindly copy. That’s how they end up duping you into writing two to ten times the code needed to do the job, whilst using confirmation bias to convince you that it’s all somehow magically “easier” than just doing the job right in the first damned place.

Hence how the above snippet probably — if we were to kick the scripttardery to the curb — has little legitimate reason to be significantly more than:

<input type="checkbox" id="toggle_welcome" class="toggle" selected hidden>
<div id="welcome" class="modal">
<div><section>
<div>
<img src="images/userWelcome.svg" alt="welcoming person">
<div></div>
<h2>
Welcome, Scott!<br>
<small>Lorem ipsum sit amet</small>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro sit asperiores perferendis odit enim natus ipsum reprehenderit eos eum impedit tenetur nemo corporis laboriosam veniam dolores quos necessitatibus, quaerat debitis.
</p>
</div><div>
<a href="more.html">Find out more?</a><br>
<label for="toggle_welcome">No thanks</label>
</div>
</section></div>
<!-- #welcome.modal --></div>

The excess DIV around SECTION being to help dodge flex’s dodgy scrollbar behavior. And remember the magic of LABEL+FOR being the same as clicking on the associated input! Also remember that small is for de-emphasis, aka the grammatical/structural reason for text to be smaller. Hence that heading being a SINGLE heading marking the start of the content of a subsection of the page… you know, what headings are FOR!!!

Proper semantics, with EVERYTHING else there belonging in the CSS. No JavaScript should be involved with the exception of perhaps setting a cookie when the modal is closed or anchor is clicked so the server can stop sending this section on future page-loads or at minimum make the INPUT not SELECTED.

730k of code where your tailwind nutters use 1.9k… where the CSS to make this work and look identical / function identical shouldn’t even take that same 1.2k of savings. AT BEST all these halfwit frameworks have done is make you move your presentation out of the CSS into the markup… where isn’t that the very thing that was wrong with HTML 3.2 in the first huffing place? At worst they’ve replicated 22 year old practices, made you write MORE code than you needed in the first place, taught you to rely on JavaScript for things that are none of scripting’s flipping business, taught you to put things in the HTML that have zero blasted business being there, and prevented you from learning even the most basic of HTML and CSS functionality.

That’s why these idiotic mind-numbingly moronic frameworks do nothing but drag us back to the worst of late browser-wars era practices; and the people who create and promote these systems have their craniums wedged so far up 1997’s rectum they got to say “hi” to Lemmiwinks on the way by.

All garbage like tailwind or angular are doing is making you work harder, not smarter. No matter how much BS propaganda they spoon feed you to the contrary.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store