Talks
Speakers
Events
Topics
Sign in
Home
Talks
Speakers
Events
Topics
Leaderboard
Use
Analytics
Sign in
Suggest modification to this talk
Title
Description
Breaking up with the bundle by Joel Hawksley Over the course of 14 years, the GitHub.com CSS bundle grew to over 40,000 lines of custom CSS. It became almost impossible to refactor. Visual regressions were common. In this talk, we'll share an honest picture of our successes and failures as we've worked to break up with our CSS bundle by moving towards a component-driven UI architecture.
Date
Summarized using AI?
If this talk's summary was generated by AI, please check this box. A "Summarized using AI" badge will be displayed in the summary tab to indicate that the summary was generated using AI.
Show "Summarized using AI" badge on summary page
Summary
Markdown supported
In his talk at RailsConf 2022, Joel Hawksley discusses the evolution and challenges GitHub faced with its custom CSS bundle, which expanded to over 40,000 lines over 14 years. This growth, though initially manageable, became problematic as it led to frequent visual regressions, technical debt, and difficulties in implementing changes. Hawksley highlights the following key points: - **History of CSS at GitHub**: The CSS started with only a few lines and ballooned to over 40,000, becoming a significant liability for development efficiency. Primarily, the use of a monolithic CSS bundle contributed to these challenges. - **Design Systems**: GitHub developed a design system called Primer to standardize UI elements. However, despite these efforts, much of the legacy CSS remained, highlighting a disconnect between the design system and existing code. - **Measurement and Analysis**: To combat the challenges posed by custom CSS, Hawksley and his team implemented measures to analyze their CSS changes. This included using data analytics tools like Datadog to create visual representations of CSS-related metrics, tracking lines added or removed. - **Refactoring Efforts**: Various attempts to refactor and segment the CSS bundle faced obstacles, particularly due to dependencies created by shared styles across components, leading to difficulties in maintaining reusable code. - **Innovative Solutions**: The team explored migrating towards a component-driven architecture inspired by React paradigms, such as CSS-in-JS for better encapsulation and critical CSS to serve styles only when needed. This included experiments with new structural approaches using frameworks like View Component. - **Visual Regression Testing**: To address visual regressions, Hawksley discusses developing methods for computed style testing, akin to version control for styles, which raised awareness and helped mitigate CSS adjustments. - **Future Direction**: Ultimately, the team concluded that rewriting rather than refactoring was necessary for the long-term sustainability of GitHub's CSS. They aim to rebuild the UI incrementally using the design system and are open sourcing various components to streamline development. Hawksley emphasizes the importance of learning from both internal and external sources to innovate beyond traditional frameworks and languages, underscoring the need for a collaborative approach to well-deserved engineering challenges as GitHub looks to break away from its legacy CSS bundle.
Suggest modifications
Cancel
