Company
Date Published
Author
Charlie Gerard, Leslie Cohn-Wein
Word count
2069
Language
English
Hacker News points
3

Summary

** The Netlify UI codebase is undergoing a refactoring to switch from global CSS to utility-first CSS using Tailwind, aiming to improve maintainability and performance. The current architecture has 35 different CSS files, making it difficult for developers to keep track of styles and overrides. The team has identified the need to refactor due to high-tech debt and the growing number of frontend developers contributing to the codebase. After benchmarking different CSS solutions, they chose Tailwind for its human-readable classes, low specificity by default, and modular/composable nature. To implement this change, they will focus on converting small components first, with a goal of completing the conversion within four weeks. The team has set up milestones and visual regression tests using Percy to track progress and catch potential bugs early. They are also addressing technical difficulties such as readability and overrides, and building a layout component to handle margins between UI components. The ultimate goal is to create composable and consistent page layouts without copying and pasting fragile JSX patterns around the codebase.