On Adopting CSS-in-JS

Published ....
Last modified ....

Share this post on BlueskySee discussion on Bluesky

As an aside, this blog post originally started fairly focused on the story of our adoption of Styled Components, including going into some of the pain points we wanted to solve with that adoption, however the recent shift to drop Styled Components caused me to re-write a significant amount of the post.

At Wayfair we've recently started to shift how we approach authoring CSS for our web applications, and like most technology shifts across large companies, it's been an interesting journey.

I've been meaning to get around to this blog post for quite some time, I think my first earliest drafts for this were created around January in 2021. Since then I've shifted teams and mostly moved away from having a direct impact on the direction for our CSS approach, however I'm still relatively close enough to the work to hopefully have an interesting perspective on the topic.

To better set the stage I want to rewind a bit to around mid-2018 (yes, about 5 years ago at the time of publishing this post) the design systems team at Wayfair was essentially maintaining three separate component libraries. We supported a library meant for supporting our storefront experiences (those that you normally interact with when visiting one of our websites), another library for our suite of internal tools that mostly employees of the company used to do their jobs, and one other library to support the supplier side of things that suppliers selling their products on Wayfair directly interact with to manage their offerings on our e-commerce platform.

Additionally, at that time we were a team of 4-5 software engineers maintaining these three libraries, each library consisting of roughly 70 unique components!

However, the libraries supporting the internal and supplier experiences were essentially copies of one another besides the theming, the internal system used some different colors and a different font face than the supplier library but they otherwise would receive the same updates.