This is the beginning of a 4-post series, taking you through a website refactoring process using tachyons, a functional CSS toolkit that is guaranteed to trigger very strong opinions [insert Dave Rupertâs hot drama soundboard effect].
The website in question is SocietyOne, an Australian marketplace lending company where I work as the front-end lead.
Welcome to the first chapter!
On the menu
- Why re-write in the first place? (you are here)
- What even is functional CSS?
- The refactoring process, step by step
- The aftermaths: key learnings and recommendations
Letâs begin!
Chapter 1: Why re-write in the first place?
The marketplace lending industry is fairly new and things are moving fast.
Weâre a very small team. We designed and developed our ânewâ website about two years ago, and have been maintaining and evolving the codebase in a very iterative process.
We planned things carefully. Adopted the BEM methodology to organise our styles. Things were working great for us.
We were writing beautiful, clean modules. We had a good understanding of our codebase. Up to a certain point.
I love BEM. I think itâs a great way to organise your CSS and does a good job at keeping specificity relatively low. What BEM (and most other CSS architecture methodologies) doesnât really help with is dealing with accumulating technical debt.
Our growing company went through a lot of churn. New people, new opinions, new strategies. This generates a lot of minorâââand majorâââchange requests. This phenomenon, commonly known as BAU (business as usual), is one of the biggest drivers of technical debt in a codebase.
The Start of the End
BAU requests often coming with a âcan we have it done todayâ deadline, as a developer you run a high risk of reaching out for questionable techniques at some point.
It might be an extra class at the bottom of a stylesheet, or a copy/paste of a module with a few tweaks here and there instead of carefully crafted âBEM modifiersâ.
Before you know it, youâre considering introducing a shame.css file in your repo. Dare I say, you may even reach for an inline-style hack. đ±
And then, things get out of hands.
It doesnât take many hotfix hacks to throw a huge spanner in your beautiful CSS wheel. And as real-life BAU requests continue, you can only witness your handle on the codebase slip away further and further. đ
When things reach a tipping point
In the weeks leading up to Christmas 2016, I felt like things were reaching a tipping point. Tech debt was becoming a serious problem, and there was no sign of BAU slowing down. Quite the opposite, actually.
I was losing a lot of sleep over this increasingly worrying situation. I remember being close to the edge of the âburnout cliffâ. Dangerously close.
What now?
Something needed to happen. Some thing.
One day, totally out of the blue, my colleague showed me that intriguing thing he stumbled upon, called tachyons.
Looking back, this very moment may have played a huge role in preserving my mental health.
I had never heard of tachyons before. I had a look. My initial thought was: âMeh, look at all these classes in the HTML. Ughâ. I moved on.
A lot of peopleâââif not everyoneâââhave the exact same initial thought.
And they move on.
A couple of days later, I read this spectacular blog post by Adam Morse (the creator of tachyons). That article resonated with me so much that I decided to give that tachyons thing a second look.
The more I thought about this functional CSS approach, the more it made sense. My head started to buzz with excitement and hope.
In the next chapter, Iâll show you why!
Hacker Noon is how hackers start their afternoons. Weâre a part of the @AMIfamily. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
To learn more, read our about page, like/message us on Facebook, or simply, tweet/DM @HackerNoon.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, donât take the realities of the world for granted!3