CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Refutation requested: Tailwind CSS creator's take on semantic class names  (Read 1318 times)

Gary-SC

  • Junior Member
  • *
  • Posts: 30
  • Karma: +1/-0
Adam Wathan, the creator of Tailwind CSS, discusses why semantic class names don't work and why he created Tailwind CSS in the following article. I would love to hear Jason's detailed refutation on this piece.

https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

coothead

  • Sr. Member
  • ****
  • Posts: 390
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Hi there Gary-SC,

I don't see why a detailed refutation is required.  ::)

This guy is only attempting to justify the use of his framework.

Whilst waiting for Jason to reply, you might like to read this
article of his...

More Tailwind Junk

Note

Remember to clear cookies for the site if necessary.  ;D

coothead
« Last Edit: 18 Jun 2021, 07:05:48 am by coothead »
~ the original bald headed old fart ~

John_Betong

  • Full Member
  • ***
  • Posts: 218
  • Karma: +24/-1
    • The Fastest Joke Site On The Web
Adam Wathan, the creator of Tailwind CSS, discusses why semantic class names don't work and why he created Tailwind CSS in the following article. I would love to hear Jason's detailed refutation on this piece.

https://adamwathan.me/css-utility-classes-and-separation-of-concerns/
I get the general impression that programmers that write Semantic CSS, etc are paid by lines of code and completely forget about Don't Repeat Yourself (DRY) Principle.

https://en.wikipedia.org/wiki/Don%27t_repeat_yourself

Three Letter Acronyms are far more efficient.

https://this-is-a-test-to-see-if-it-works.tk/cutcodedown/gary-sc

Try the footer validation links - it is even Google Mobile Friendly :)
« Last Edit: 18 Jun 2021, 11:27:41 pm by John_Betong »
Retired in the City of Angels where the weather suits my clothes

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
I get the general impression that programmers that write Semantic CSS, etc are paid by lines of code and completely forget about Don't Repeat Yourself (DRY) Principle.
Which gives me the impression that you don't understand any of the advantages of semantic markup and separation of concerns, much less what's wrong with idiocy like tailwind since by it's very nature it repeats itself mindlessly and idiotically.

For example: Tailwind idiocy of gibberish non-semantic dumbass repetition of presentational classes -- defeating the entire reason HTML and CSS are separate and dragging things back to the worst of 1990's practices:
Code: [Select]
<nav class="font-sans flex flex-col text-center content-center sm:flex-row sm:text-left sm:justify-between py-2 px-6 bg-white shadow sm:items-baseline w-full">
  <div class="mb-2 sm:mb-0 inner">

    <a href="/home" class="text-2xl no-underline text-grey-darkest hover:text-blue-dark font-sans font-bold">LogoText</a><br>
    <span class="text-xs text-grey-dark">Beautiful New Tagline</span>

  </div>

  <div class="sm:mb-0 self-center">
    <div class="h-10" style="display: table-cell, vertical-align: middle;">
      <a href="#" class="text-md no-underline text-black hover:text-blue-dark ml-2 px-1">Link1</a>
      <a href="#" class="text-md no-underline text-grey-darker hover:text-blue-dark ml-2 px-1">Link2</a>
      <a href="/two" class="text-lg no-underline text-grey-darkest hover:text-blue-dark ml-2">About Us</a>
      <a href="#" class="text-md no-underline text-grey-darker hover:text-blue-dark ml-2 px-1">Link3</a>
    </div>

  </div>
</nav>

vs. clean accessible semantic markup that would be used to do the same job.

Code: [Select]
<header id="top">
<h1>
<a href="./">
LogoText<br>
<small>Beautiful New Tagline</small>
</a>
</h1>
<nav id="mainMenu">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link1</a></li>
</ul>
</nav>
</header>

But sure the people leveraging semantic markup are the ones mindlessly repeating themselves, not the people who insist on saying the same class over and over again on every freaking like-child. Sure, keep telling yourself that saying class="text-md no-underline text-black hover:text-blue-dark ml-2 px-1" for each and every joe-blasted menu item is actually not repeating oneself.

*BARF*.

If you're saying stuff like that in the markup, you really have ZERO huffing business making websites!. As I've said many the time, monument to the 3i of web development;  Ignorange, incompetence, ineptitude, and idiocy. Oh wait, that's 4... ok, the 4i

Three Letter Acronyms are far more efficient.
And again with the cryptic nonsensical bullshit that takes a steaming dump on any attempt at collaboration, that nobody but YOU can even understand. So useful... NOT! But that too goes hand-in-hand with the bad practice of just pissing endless pointless presentational classes on things in utter ignorance of accessibility, separation of concerns, or efficiency of code.

You know what's more effective than your precious dumbass TLA's? Meaningful names that describe what things are, and not slopping endless pointless cryptic classes in where you shouldn't even have classes in the first bloody place!

But sure, people leveraging semantics are the ones repeating themselves and writing more code. Of course they are.

Try the footer validation links - it is even Google Mobile Friendly :)
That are a waste of bandwidth, waste of space since the end user doesn't give a shit, replicates functionality you can and should add to the browser, and that you take as the gospel even though without ANY version tracking what was valid yesterday is invalid today, and what's valid today will be invalid tomorrow thanks to HTML 5 pissing on "validation" from so on high you'd think the almighty just got back from a kegger.

Mind you, I'm not saying don't validate, it can find simple errors like typos and missing closing tags. But don't take every single blasted bit of idiotic "warnings" and recent hurr-durrz changes as the gospel. Thanks to HTML 5 being this willy-nilly ever-changing inconsistent shit-show of "design by comittee", a lot of things we need for compatibility and accessibility have their validity status change every blasted time the wind blows.

See such mind-numbing derpitude as the tbody/tfoot order, the mere presence of target="", browser specific meta like X-UA only being able to contain values they approve of despite browser specific values supposedly being explicitly rejected from W3C specs, etc, etc, etc. If I need to set X-UA to IE9/earlier so I get CC's back, the W3C can go plow themselves with their "you can only declare edge" bullshit!
« Last Edit: 19 Jun 2021, 02:52:08 am by Jason Knight »
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Adam Wathan, the creator of Tailwind CSS, discusses why semantic class names don't work and why he created Tailwind CSS in the following article. I would love to hear Jason's detailed refutation on this piece.
Simple, he never learned enough about HTML or CSS to have an informed opinion before he went off the rails with dipshit bad practices.

I kind of cover that in my medium article:

https://medium.com/codex/tailwind-the-new-king-6a9908097da8

Seriously, by the time he hits his "phase 2" he's already screwing the pooch with idiocy that bypasses leveraging proper semantics, by pissing endless pointless idiotic classes on everything. 100% dumbass ignorant CRAP. With the BEM-like rubbish he started down the road of making it more complex, more bloated, harder to work with, and then he kept layering more and more ignorance and misunderstanding atop it, until by the time he came up with his "slop the classes on everything" rubbish, he ends up writing two to ten times the code needed to do the job, NOT counting the size of his garbage framework against it!

He never grasped the simple concept that content dictates semantics, and you can leverage that semantics to use minimalist CSS to control it... whilst also reducing the amount of times you have to repeat yourself in the markup OR the CSS.

Which is why he and developers like him have their craniums wedged up 1997's rectum.

I lack the words in impolite company to truly express my disgust with just how utterly dumbass dipshit rubbish like Tailwind or Bootstrap are... and Tailwind is literally just bootstrap's stupid dialed up to 11. The quacks, morons, and fools who see benefit to using these types of dense obtuse bird-brained benighted nescient witless systems are all basically hanging vacancy signs on their backsides.

... and my foot is looking for a room.
« Last Edit: 19 Jun 2021, 03:07:20 am by Jason Knight »
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

Gary-SC

  • Junior Member
  • *
  • Posts: 30
  • Karma: +1/-0
I didn't know that Jason has already written a lot about the subject. Thank you for continuing to educate us out there.

I wanted to gather third-party insights before going to war against the new dev lead guy at work. He wants to come up with a new website design theme with a custom Tailwind CSS. He keeps telling me how it will make our job simpler by skipping writing CSS and standardizing styles—what a bunch of BS for all the reasons Jason has already laid out. I've been looking through the official documentation, and I don't see how it's "easier" than writing straight CSS without learning another layer of pointless abstraction.

It's been a while since I began doing this stuff, and I found it relatively rare to come across people who advocate for sharpening skills, craftsmanship, and concise code. It seems that the entire industry is all about "making a dent in the universe," making quick bucks, and using the next shiny tools. "Doing more with less by cutting corners everywhere with the next shiny new tools" is not what I have in mind when I think of doing good works. There is just so much excess in everything we do nowadays...

Now, off to the battle. (sigh)

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
He keeps telling me how it will make our job simpler by skipping writing CSS and standardizing styles

"standardizing styles" is one of those meaningless bits of market-speak doubletalk... that in this case is a bald faced lie typical of that used by people not qualified to flap their yap about HTML or CSS.

This is particularly true since the "skipping writing CSS" nonsense makes no sense, since garbage like tailwind literally works by making a class for each and every joe blasted CSS property, and then crapping them into the markup. Over and over again, on everything. Comedy gold when the clowns who use this garbage then claim it's about "don't repeat yourself" -- because nothing says DRY like repeating the same class on each and every joe-blasted sibling level tag.

You're not writing less CSS, you're just moving all your references to the CSS into the markup and repeating it. That's how you end up writing two to ten times the markup needed to do the job, that relies on some dumbass massive library to even work.

It's just so mind-numbingly stupid I cannot fathom how the blazes anyone can even defend the practice, much less see any merit in it!

But then when the movie "idiocracy" appears to now be prophecy instead of mockery, the kid gloves are off on the amount of stupid the rank-and-file now seems to hold up as an ideal.

That these clowns believe these LIES and parrot them endlessly is just so infuriating, particularly given how it screws over client after client.

I GUARANTEE you that anything he writes with tailwind will be a non-semantic gibberish hard to maintain mess that's two to ten times larger than need be, NOT counting the size of the frameworks against it. As I often say, a monument to ignorance, incompetence, and ineptitude.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

coothead

  • Sr. Member
  • ****
  • Posts: 390
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Quote from: Jason Knight
It's just so mind-numbingly stupid I cannot fathom how the blazes
anyone can even defend the practice, much less see any merit in it!

Hans Christian Andersen explains the behaviour perfectly here...

The Emperor's New Clothes

The Emperor's New Clothes - .mp3

coothead
« Last Edit: 23 Jun 2021, 06:08:09 am by coothead »
~ the original bald headed old fart ~

judgedredd

  • Greenhorn
  • *
  • Posts: 2
  • Karma: +0/-0
My jaw literally fell open when I saw this:
Code: [Select]
<nav class="font-sans flex flex-col text-center content-center sm:flex-row sm:text-left sm:justify-between py-2 px-6 bg-white shadow sm:items-baseline w-full">
  <div class="mb-2 sm:mb-0 inner">

    <a href="/home" class="text-2xl no-underline text-grey-darkest hover:text-blue-dark font-sans font-bold">LogoText</a><br>
    <span class="text-xs text-grey-dark">Beautiful New Tagline</span>

  </div>

  <div class="sm:mb-0 self-center">
    <div class="h-10" style="display: table-cell, vertical-align: middle;">
      <a href="#" class="text-md no-underline text-black hover:text-blue-dark ml-2 px-1">Link1</a>
      <a href="#" class="text-md no-underline text-grey-darker hover:text-blue-dark ml-2 px-1">Link2</a>
      <a href="/two" class="text-lg no-underline text-grey-darkest hover:text-blue-dark ml-2">About Us</a>
      <a href="#" class="text-md no-underline text-grey-darker hover:text-blue-dark ml-2 px-1">Link3</a>
    </div>

  </div>
</nav>

Talk about garbage out. What went in to make it this bad in the first place????

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
What went in to make it this bad in the first place????
Ignorance, apathy, and wishful thinking.

The creators of these types of systems do NOT know the first blasted thing about HTML or CSS before they start going "I can make this better". Their utter lack of knowledge BEFORE they start in on this stuff ends up contagious because it infects other beginners.

I still say the core of it though is people learning mid-90's presentational HTML and then refusing to think of it in any other terms. They WANT things like the FONT and CENTER tags back, attributes like BGCOLOR, BORDER, ALIGN, and tables for layout. This is evident in how they use classes to recreate the exact same markup techniques.

Which is why it's pathetically sad when someone like you or I calls them out on these problems, and they say "You're stuck in the past" or "stop thinking like it's still the '90's grandpa"... Sure, they're spitting out the same techniques as HTML 3.2, but we're the ones stuck in the past.

It's why I object to so much of HTML 5, since it too in many places tries to drag things back to the worst of pre HTML 4 Strict practices. These people NEVER embraced semantic markup, separation of concerns, divide and conquer programming models, KISS, DRY, or any other meaningful metric.

Seriously, look at that code. These guys will say that "semantic markup" violates DRY, but their BS does not. That's how out of this world deluded they are! Dunning-Kruger on steroids. They're so full of manure they can't even see their own shit for all the fudge they've had packed.

Bad examples from the likes of W3Fools, bad education thanks to the specifications not even being written for lowly "content creators", and just plain web-rot of two decade old tutorials all play their role in people thinking "this is just how it's done". It's why you hear so much ignorant crap like "you semantic markup people just want to make things harder". Really? REALLY?

I swear it's like the majority of people working in this field live in Bizarro-land where every day is opposite day.

« Last Edit: 1 Jul 2021, 04:51:23 am by Jason Knight »
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

ingo

  • Junior Member
  • *
  • Posts: 18
  • Karma: +1/-0

I still say the core of it though is people learning mid-90's presentational HTML and then refusing to think of it in any other terms.

Isn't it much simpler? Carving out a space in the IT world to get some respect by doing incredibly complex stuff (for simple things)? Think overly complex build systems where in the days of old you just dropped main.c on the compiler.

It seems to that the front end still lives in this identity crisis, so many layers of stuff over their programming languages. A simple and relative easy markup language everyone can learn. Eek lets invent Haml, Jade/Pug and what not. A nice layout engine, lets do less, sass, turbine ...

Growing up pains (still?) or a  inferiority complex?

 

SMF spam blocked by CleanTalk

Advertisement