A tale from the future: Johnny and the woman from department B

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 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 it has now started to hurt developers.

"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.