Refactoring kids' bedroom
Evgeny Khoroshilov
Design System Tech Lead | Web Accessibility, Design Systems
So you want to paint kids' bedroom. How simply could that sound?
Two hours on the sunny weekend and done (you can't actually waste more time on this)! But here's the catch - the room has been furnished some time ago.
No problem! Just move everything out!
Oh, this one or two little thingies attached to the wall... firmly - you double-checked that already. You can't just tear them off, and you can't leave it as is for sure. You come up with a solution - just cover it with something you can dispose after this all ends up.
Nicely done!
Damn it, somehow - you don't even realize the root of the problem - the bed does not fit the doorway, it's impossible to move it out without either destroying the door or disassembling the bed.
You have never dealt with the beds, and you refuse to touch it, because it seems too hostile for your tools (at this moment kids start getting mad at you, because you doing it all wrong!). And adding insult to injury - no one at home remembers how this piece of furniture got there, not mentioning their assembling skills suck much as yours.
Finally, after placing the bed in the center of the room you cover it with all junk you've managed to have so far.
Of course, in order to move one wall you will move the bed to another and so on. But hey, not so much options, right?
Finally, after...
- All right, dude, you got me!
Back to the tech stuff!
Imagine the situation with the bedroom and poor proud parent in perspective of CSS refactoring. Sounds familiar - misplaced code injections, ugly but crucial parts you can't just get rid off, something that no one remembers working properly, other stuff just being stale. And you only needed to add some decorations to the element!
But what's more important - you wanted to do it right - means make things maintainable and transparent.
This article won't help you with that.
But you know what - there's quiet a space for your future code to be written just right!
So, next time when you'll find yourself designing CSS for the component system or a component itself or a single-page app remember how to "paint a room without breaking everything to pieces".
Sounds too metaphorical?
TLDR: When you realize that in order to make a minor change in future design you'll have to revise significant pieces of markup along with CSS - erase and rewind
you can do better!
(not based on true story)