📝 CSS-Tricks 217: Small Changes in the Right Direction

View this newsletter on the web.

[Robin]: My day job is at Sentry and I’ve never worked at a place where everyone cares so intensely about the quality of the codebase and the design. But one thing that I think could be improved is our CSS and so each Friday afternoon I focus just on that. It’s a couple of hours where I try to make a difference, scour through the codebase looking for things I don’t understand, but this tiny amount of time is already starting to prove how valuable small changes in the right direction can be.

So long as you’re patient and so long as you have a list.

At Sentry, we use the CSS-in-JS library Emotion to help us style our React components but we also used to have Bootstrap styles in Less that are then loaded in the head of the HTML. I noticed that as I was navigating the app that we had duplicate styles loading all over the place. We also had a ton of custom components in React that we really didn’t need — we could let the cascade in our app provide the base styles for lots of things instead. And so after rummaging about looking at a component I realized that there were all sorts of places where our styles were coming from: there was no single source of truth.

So! Instead of panicking, the first thing I did was make a list of every problem I could see with our styles. Then, the more spelunking into our codebase that I did, I started to refine that list into tasks. What files needed to be deleted? Which should we keep?

There are a lot more steps to this refactor than just this stuff, but it’s a start. This list of tasks isn’t really meant to be added to a Jira board or anything, it’s really just to inspire me to break up my pull requests into tiny chunks and then ship code every Friday afternoon. Each list item should ideally be one shippable chunk of code.

The end goal is a consistent and easily-understandable base of core styles: CSS declarations that affect every single page in our app whether or not that’s been refactored into Emotion yet. And I guess I don’t have any big advice here or anything other than it’s sometimes important to slow down on work like this. This project isn’t urgent, it’s not going to make the company a ton of money tomorrow, but once it’s complete in several months time, it’ll make our lives a tiny bit easier.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s