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 every single list on the site to have less padding, but don't change the padding anywhere else.
He had just spent the previous evening writing a regex to find all of his inline p-2 classes on his lists, but he realised the futility of trying to parse HTML with a Regex, many before him had warned of this but Johnny didn't listen.
He threw his oatmeal in the bin, dragged himself to the office and sat there, staring at the screen, in agony.
2462 different lists across the site, some statically implemented, some generated via templates...they all looked pretty similar but he just couldn't see a way to change the styling on all of them at once without breaking the padding on other items on the site.
Suddenly a woman he had never seen before popped her head over his monitor "you all right there Johnny?"
He immediately started crying.
"No" he sobbed, "My boss wants this impossible task completing".
The woman smiled "let me show you something" she said softly, sympathetic to Johnny's plight.
She showed him her departments website, it looked very similar to his and was equally as complex. "Inspect that list right there" she said.
Johnny did as he was instructed and he couldn't believe his eyes. The HTML it was....well....there was more HTML than classes.
"What is this witchcraft?" he asked her.
"It is the way the internet was designed to work" she exclaimed. "In the old days this is how we wrote websites".
"Where can I learn this power?" he asked.
"Not from a Jedi" she replied. Johnny looked confused, he didn't get the reference. The woman rolled her eyes and started to explain.
"You see all of the lists on my site are defined in one place". Johnny looked on in awe. She showed him this thing called a "Style Sheet".
"See here", she continued, "I have added CSS that defines the padding, margin, colour etc. here".
Johnny's eyes widened as she changed one line of this magical language and pressed save. She went through different pages across the site and the lists had different padding, but nothing else had changed!
"Where did you learn this skill?" he asked.
"Oh it is the old ways, the ways before 'The wind' hysteria hit".
"teach me!" Johnny exclaimed.
Johnny fidgeted as she explained, feeling uncomfortable at the thought of this new way.
"But how can I tell what styles are applied to an element if they aren't defined in utility classes within the HTML?" he asked. She introduced him to the inspect element tool.
"Amazing" Johnny exclaimed.
"But how can I make sure the team follows a design system, surely this leads to confusion?" he exclaimed.
"Great question" she answered, "you write documentation to explain the classes". This idea of writing documentation was new to Johnny, but he quickly caught on to the idea.
"Oh so if I want a card, I design a card element for the whole site"
"yes, that is it" she exclaimed.
"And anyone can use that card element", he asked, excited by this concept.
"he's beginning to believe" she quipped, suddenly wearing a pair of sunglasses and a long black coat. Johnny once again didn't get the reference, so she powered on regardless.
"Yes, but you have to make sure your team know not to create their own version, they need to know it exists, otherwise confusion will follow".
"So what you are saying is I should create a card component, then document the component so others know how to use it".
"Yes, you are getting it now. You see 'The wind' happened because developers were too lazy to read and create documentation, they were obsessed with the 'new and shiny' things that promised a better life without effort, they just couldn't see the mess they were creating at the time. Notice how we have no build step, notice how I can just grab this CSS file and put it onto this site and without any extra configuration it works."
Johnny finally saw it, his HTML was legible and had few classes. He could make changes in one place and update the whole site in seconds. He could add a new widget in minutes, document it, and his team could then read about the widget, apply the relevant class (yes just one class!) and everything was displayed consistently and correctly across thousands of pages.
"You have learned the old ways, I must go now".
She wrote .woman *{display: none} and vanished. Johnny tried it, {johnny *: {display: none} but it didn't work, "oh well, maybe I just wasn't classy enough", Johnny thought.
Johnny went to his boss with this new way of doing things. His boss was amazed, his boss told Johnny he should spread the news far and wide of his discovery.
"It isn't my discovery" Johnny exclaimed, "It was the lady from department B who taught me".
His boss turned white (which scared Johnny as his boss was from Jamaica) - "There is no department B", his boss stuttered, "We got rid of it as their staff didn't work 100 hours a week and we couldn't understand how they got things done still".
Johnny understood now, the old ways had been forgotten because of laziness, lack of understanding and the short sightedness of developers. But the new way has now started to hurt developers, they were copying the same classes into the HTML in 50 different places instead of one.
"If only people spent as much time documenting their CSS and learning CSS as they did evangelising about the latest shiny thing, we wouldn't be in this mess." Johnny thought, "But how could anyone have foreseen strange client requirements like changing one item on a specific element across a whole site. How could anyone have foreseen any of this?"
Johnny continued studying the old texts, learning more and more about this simple and misunderstood language.
He then went on to teach of his findings. His Ted Talks were legendary, thousands of developers flocked to see this new way of doing things. Johnny got paid thousands to show people his tricks that he had learned.
Johnny retired young and rich, he was known as "Johnny Big Brain".
He sat on his Yacht, thinking about that mysterious woman who was the secret to his success. He started thinking about the last time he saw her. He wanted to see her, he wanted to thank her for everything.
He grabbed his laptop, taking all his knowledge he had acquired reading the old texts.
He started typing.....woman *{display: fixed}...
The end
Obviously this is just a silly jab at the tailwind hype train making people pick up bad practices.
Tailwind has its place and it is a useful (read awesome) tool for prototyping and side projects, just step back from the hype for a minute every once in a while if you are building something bigger, make sure you aren't painting yourself into a corner like Johnny did.
I encourage you to use Tailwind, just don't use it exclusively in place of CSS without really thinking about it as I can see a few big "gotchyas" coming down the road that a lot of people are overlooking due to the hype.
utility classes for local adjustments, "proper" classes for repeated items and you will be as happy as Johnny Big Brain in years to come.
Top comments (18)
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! 😜🤣