me irl — Updating CSS

The “Bacon Blaster” burger combo with a side of fries. Mmmm. Your favourite.

It’s 2PM. You just came back from a well deserved extended lunch break where you listened to your favourite podcast while trying to figure out why the barista at Starbucks wrote “Devin” on your cup when you remember telling them, no, yelling to them that your name is “Chris”.

No time for that now. You gotta get back to work!

You open your laptop, which is adorned with 12 purposefully placed colourful vinyl stickers. The newest sticker to grace your aluminum canvas is this exceptionally cool sticker you snagged from that meet-up you went to 3 months ago.

How did the guy at Starbucks hear “Devin”?! Anyway, it’s fine. Checking Slack.

Oh right. Work. You continue investigating that weird CSS bug that Shelly (an ultra-cool back-end developer) pinged you about. You received the DM on Slack just before you stepped out to grab a bite to eat. Shelly always had a wonderful sense of timing.

She said she fixed it.

Awesome! Shelly is always on top of things. She just needed you to double check the changes before she deploys the code.

No problem!

You check out the code changes on Github. At first, you have no idea what you’re looking at… or what you should be looking for. There are so many changes in so many places.


Why did she add position: absolute; top: 52px; left: 351px;?
Why did she replace height: 52px with min-height: 50px and add overflow: hidden?
Why is there flexbox and floats being used at the same time? (Oh wait, that was an older issue. Nevermind. There’s a ticket for that in Trello… Somewhere.)
Wait… is that !important? No way. Five !important?! Shelly added Five !important flags. No wait, she only added four. You added that fifth one 2 weeks ago because… you don’t remember anymore.

It’s at this moment, you start reverse engineering all the changes Shelly did. Starting off with the !important ones. There has to be a better way to fix this CSS bug.

“Three hours later” (French accent)

You’ve been starring at the same Chrome tab for the past 5 minutes now. It’s the same Google search result page you saw the other 27 times you tried searching for some kooky CSS work arounds. The other 15 tabs are various StackOverflow posts from people asking sorta-similar questions — none of the replies really helped though.

You just spent the last 3 hours masterfully deconstructing, rebuilding and refactoring all the things, just to end up with the exact same solution Shelly had submitted.

It’s 5PM. It’s almost time to head home. You DM Shelly letting her know…


The CSS isn’t the cleanest, but it’s fine. The CSS bug is gone. The nav dropdowns don’t overlap with the popups in the modal on the “Settings” page anymore. Merge when you’re ready. Thanks!!

:)

Even though your emoticon was smiling, you sure as heck weren’t. At least, not on the inside. But Shelly, she deserved that smiley emoticon. She’s a champ.

As you pack up to go home, you ask yourself the same question you’ve been asking yourself for the past 6 weeks:

How on earth did the CSS code base end up like this?

For a few moments, you convince yourself that “it’s fine”, as you put your Apple earpod headphones in to listen to podcast queue. You’ve been waiting all week for that new episode of Sawbones. You’ve earned it.

“It’s fine!”

I’m my next post, I’ll provide some suggestions on how you can (hopefully) control this CSS insanity and maybe prevent it from happening in the first place. Until then, my heart goes out to everyone tasked to make seemingly simple changes to unpredictably senseless stylesheets.

Also, here’s a left-handed drawing of a newt who happens to be a newsanchor.

Our top story today… I still can’t draw with my left hand.

Update!

Megan Chinburg did her own interpretation of Mr. Newsanchor Newt/Frog person! ❤️

Breaking news! Megan Chinburg is awesome.
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.