How a Redesign Reduced Our Technical Debt
Early this year, we shipped a handful of design updates that look modest on their surface. We removed a gray background bordering each of our sites, adjusted spacing between components, and fixed visual bugs on our search and contributor pages. However, a deeper look will reveal an overhaul of our CSS and a dramatic shift in the way VICE code is compiled.
The first major redesign of VICE’s verticals went well, reducing years of existing tech debt while unifying each of our sites’ look and feel. Unfortunately, it also came at the price of increased build times and client-side code duplication.
The problem
With 12 sites present in the VICE network, styling was quickly becoming a bottleneck for both designers and developers.
Each site imported a primary shared stylesheet in addition to a secondary set of style overrides. Those vertical-specific overrides contained hundreds of style declarations, and thousands of lines of code. Combined, asset compilation took a crippling 5 minutes, and with more sites lined up for development, it became apparent that the build process needed refinement.
Additionally, the design process for new sites was cumbersome. Designers were tasked with creating mockups of each page on the incoming site while developers implemented them. Since there was no foundational design pattern to reference, multiple revisions were often necessary to finalize the site’s aesthetic.
Solutions
Our most recent redesign aimed to improve the look of the VICE sites and bring in a refreshed sense of branding, while also offering more flexibility to the individual websites living under the VICE name. Removing the gray background (previously used to divide up content) allows photos to be full-bleed, unlocks precious space on small screens, and gives VICE a cleaner look overall. This effort required changes to every single stylesheet, presenting an opportunity to tackle the worst of our remaining tech debt.
Custom Style Standards
VICE’s styles were in an unmaintainable state when we started. As part of the redesign, developers and designers collaborated on how to wrangle VICE’s styles. The result was a class-based system that takes the guesswork out of spacing and layout at a variety of breakpoints.
With our system in place, we deleted thousands of lines from our style overrides; a net reduction of seventy-five percent. There were process improvements as well. With patterns to reference, designers no longer had to mock up every page of a new site. Rather, the developer used the new design system, only briefly touching base with the designer to include any unique behaviors. Finally standardized, our stylesheets were ready to become components of their own.
DRYer, Componentized Styles
Componentizing our styles was a critical but difficult undertaking, compounded by ever-increasing code bloat. Although we had componentized other parts of the UI using React, stylesheets were kept separate from the JSX markup they referenced.
With fewer styles to pick through, we dropped our primary stylesheet imports, opting instead to express them as Styled JSX components. These components lived alongside markup and were able to fully incorporate JavaScript variables. Our prior stylus variables were less flexible, requiring chains of overrides for reassignment. From a single React prop, we were able to cheaply parameterize the variations between each site, effectively ending the need for expensive stylus variable overrides.
After launch, the time it took to build all 12 verticals dropped from ~5.3 minutes, to ~1.6 minutes.
In addition to faster build times, we had the added benefit of pre-computing styles on the server for better caching.
There are better days ahead for VICE Tech, thanks to our most recent redesign and removal of tech debt. We’ve improved our build times, made our codebase more consistent, and sped up our workflow. Most of all, designers and engineers now have similar tools to work from. We still have more to do and there’s a long way to go but at least we’ll be getting there in style (pardon the pun).
