📝 CSS-Tricks 221: Move and Replace

[Robin]: This week I’ve been moving into a new apartment and everything is, well, to put it kindly, an absolute nightmare. There’s a rat king of cables and three laundromat’s worth of clothes on the floor. Important documents are flung about all over the place in my kitchen, there are coffee cups in the plant pots, there are knives teetering on top of books, and I am now deadly certain that I’m breaking a dozen or more violations in my tenancy agreement. Drama!

Why am I talking about all this? Well, there is some method to the madness here. Yes, everything is disorganized and tragic but it makes sense in my head. I have made piles of gross stuff, organized bundles of categories which themselves happen to be very disorganized — and I eventually need to deal with them. Once I’ve built up enough courage I slowly walk over to a pile, give it a long, hard stare, and then dive in to fix it.

And I think is true of refactoring a big codebase, too.

Over the past few weeks I’ve been busy refactoring the styles in our app at Sentry — slowly, but surely. But I’ve started to take the approach that was recommended to me by my old mentor Kelly Sutton who in turn learned that from his mentor Kent Beck.

Anyway, step #1 in a refactor? Don’t refactor it, don’t edit the logic of the code itself. First, move all the junk into one spot.

In my case that means moving the five chunks of CSS that styles the Button component and move all of that into the same .less file. But I haven’t changed the logic yet, I haven’t removed any styles, as much as I might like to.

So what’s step #2 of a refactor after moving things? REPLACE! Purge every line of code ruthlessly because now you know that it all works in the order that it should. Delete, delete, delete. Anything that’s inefficient or weird or simply unhelpful? Bye! Send it all back to hell where it came from.

Now it’s important to mention that tech debt is going to happen to everyone but we have a decision as to whether it happens to us or we happen to it. Okay, that sounded smarter in my head. What I mean by that is there is unknown tech debt that hurts everyone and then there‘s the tech debt where everyone is focused on a plan to resolve it. So, at least we’re recognizing there’s a problem here with our CSS. That’s step #0 of any refactor.

But all I’ve been doing this week is move the mess around. I move a bunch of bad code into one spot, wait for tests to pass, and we learn that there are no regressions yet. That’s the plan, at least. We’re still in step #1 of the refactor, just as I’m still stuck in the first stage of moving into my new apartment; make big bundles of mess and then preparing myself to tackle each bundle one by one.

I guess my advice to myself here is this: small steps where you’re not being punk rock and deleting massive amounts of code will actually make things faster in the end. Try and break up every refactor project into two steps: Move and Replace, and from there you’ll be more focused, fewer regressions will happen, and it’ll ultimately be faster in the end.

Although yes, it’s embarrassingly messy and slow in the beginning. In fact, from a distance it even looks like you’re contributing to the mess. But dang it really does seem to work — so much so that when I’m refactoring things I become incredibly annoying:

“Move and replace,” I now whisper to myself. “Move and replace.”