Hi there dear viewer, the year is 2030 and Johnny is sat crying into his bowl of oatmeal.
His boss has just given him an impossible task - change ...
For further actions, you may consider blocking this person and/or reporting abuse
Tailwind developer (start reading this): hmm, intresting, let's continue.
Tailwind developer (at the middle of this): haha funny! those JS developers that don't know how to work with CSS, silly them ...
Tailwind developer (at the end): ##**??!! .. removing my like from this article ..
Tailwind developer (after one day): what the hell was the
display: nonething? never heard about, for sure a typo in the post .. let's get back to work<button class="md:b-5 sm:flex lol:py-4 tr-2 color-purple-not-too-black box-shadow-small-to-left ">Submit the form</button>...Tailwind developer (after one day into tailwind):
Actual developer 2 days into tailwind:
If tailwind was just Bootstrap 5, why not stick to bootstrap?
If CSS was easy to master, why not let anybody append their own 100 lines of
!importantstyles to the existing 5000 lines of existing project css.Or why not "simply" use CSS-in-JS 🤮 ?
Tailwind developer: "TIL never tap the like button before you actually read the article" 😂
Haha, not all of them but just the evangelical ones. The
lol:py-4made me smile!Looking forward to a future chapter, where Johnny visits the “Internet Museum of Lost Technologies”.
In the vaults of the museum, Johnny encounters
<blink>andmarquee>, searches with “AltaVista”, and learns about the Browser Wars!Suddenly he discovers an ancient product called “Microsoft Frontpage”.
"Wow – even in the early days, some developers and companies ruined the aesthetics of pure HTML, CSS and JavaScript!”
If we are going to visit the museum of lost technologies....how can we possibly not mention "Clippy" from Microsoft! - (video below is a masterpiece worth watching! 😃)
😆
Silly johnny could've saved himself all this trouble if he'd just created a List component. He'd have the same "single change" but also with the more explicitly semantic meaning of having a
<List>element in his markup.Then he doesn't have to throw away his awesome utility library!
Can you image what todays native W3C standard Web Components can do for Johnny today..... without Tailwind, because a good Web Component does its own styling.
Web Components unify
HTML + CSS + JavaScript... but, unlike Frameworks, keep each separate.You can create your own tags:
Web Components are not new technology! Everyone has used Web Components
It is what
input,videoand many more tags are built on for many many years.Only difference is:
The technology is available (since 2018 in all modern Browsers) to 3rd party developers.
There once was a wise witch who coded the perfect css file. While others, no matter how hard they tried, only spun spaghetti code with 5000 lines of css ignoring any understanding of cascade and specificity, which made them embrace utility based styling as the lesser evil, chasing the devil with Beelzebub.
In real life, hopefully nobody would hand-code repetetive class name combinations in hundreds of lines of markup. As we all know, people don't write HTML. They either write component-based single page applications or use a low code tool like webflow or Gutenberg block editor.
But let's suppose someone did. It was tedious and error-prone, but they did use proper tooling that warned when misspelling class names.
Why use regex to edit when there are transformation tools? In a descriptive language like XSLT, the editing can be done correctly and quickly (they would pay me 1 hour, but at a ridiculously high hourly rate, as knowing how to use XSLT knowledge will be arcane wizardry like COBOL). Of course, I would have to normalize their inconsistent markup first, using an html parser, as XSL needs a well formed DOM to work on. That might introduce some new, hard to find errors, so I can charge some more hours for bugfixing later.
But back in real life, the original developers had some build tool chain anyway, for postcss and purgecss, so they will probably also have used component code for a static content management or site generator like gatsby or eleventy, so we would be able to change one line in a source code component instead of many lines in the emitted code.
Also in real life, we would have avoided repetetive class names by defining our own components, and probably defined some global critical css inline in our document head once. So even without an html content generator there should be some compound classes like
.chapter { @apply .p-2 }where you changed the padding only once, once again.So, like you concluded at the end of the fairy tale, class names are not bad in general, but misuse of tools can pile up technical debt quite quickly!
🤣 This was such a ridiculous story and reading it was making me go like
However, I'm not a huge fan of Tailwind so this pleases me anyway. 😌
Silly was the aim, if it made you raise an eyebrow or crack a smile even then it did it’s job! 😄
I think the woman in this story should be called CaSSidy....I will see myself out!
CSS survived Bootstrap it will survive tailwind 😉
It’s the circle of life (third movie reference 😜🤣🤣). ❤️
Great StackOverflow post, which "is locked to prevent inappropriate edits to its content. The post looks exactly as it is supposed to look - there are no problems with its content. Please do not flag it for our attention." Also " locked posts can't be voted on" and "comments on locked posts are not eligible for voting". Such as shame 😉
Definitely worth to follow that link 🤪
That was the point, it was just a silly thing about using regex, of course I would assume people know to use an HTML parser, but if they have forgotten the old ways of css who knows!
That was hilarious and informative. Thanks :)
Hehe glad you enjoyed it! As you can tell I was in a silly mood this morning! 😜🤣