April 20, 2018CSS Overhaul
CSS Overhaul
While at thredUP sometime in 2017 I had an opportunity to take on the overhaul of our CSS. You see over the years we’d allowed a few libraries to be added in and the application itself had the same definitions of colors, fonts and overrides in a handful of places. SASS was being used but due to the inherit nature of the CSS cascade you saw selectors that were a bit comedic to be honest.
So I got the chance to do two things I love, CSS & Learning. I went to quickly discover the beauty of PostCSS and CSSNext. CSS variables give us everything required for a solid “style guide” we just needed to define it. Working with our design team we were able to knock out the basics:
- Font Families / Sizes / Weights
- Primary Color Palette
- Range of Grays 0 – 9
- Grid System ~ 8pt Grid
Each of these are then created as CSS Variables and centralized to a common location. This is crucial to creating something that you can easily update “globally” and “effectively”. At first glance it may seem like overkill in terms of separation but I’ve found it keeps reviews much simpler and prevents unwanted bloat in the long run.
Example Folder Structure
Above is the core of what we ended up with. One very specific rule was keeping the “variables” folder and children free of anything not scoped in “:root”. This allows us to import our CSS variables into the components using CSS Modules and produces no additional waste.
It’s been going on 3+ years since this abstraction occurred and I am finally writing a bit about it. We’ve made changes along the way, but I am still incredibly happy with it. We’ve manage to keep our CSS focused and lightweight. We’ve also recently gone through a rebrand with relatively little friction.