Learn how Linaria, Airbnb’s newest choice for web styling, improved both developer experience and web performance
Overview
The article discusses Airbnb's transition from using react-with-styles to Linaria, a zero-runtime CSS-in-JS library, highlighting improvements in developer experience and web performance. It details the challenges faced with previous styling methods and the benefits realized through the adoption of Linaria.
What You'll Learn
1
How to leverage Linaria for zero-runtime CSS-in-JS styling
2
Why static CSS extraction improves web performance
3
How to implement an incremental migration strategy using codemods
Prerequisites & Requirements
- Understanding of CSS-in-JS concepts
- Familiarity with React and its component-based architecture
Key Questions Answered
What are the performance benefits of using Linaria over react-with-styles?
Linaria offers significant performance improvements by extracting styles into static CSS files at build time, eliminating runtime overhead. Benchmarks showed that Linaria performed 22% better than Emotion in Total Blocking Time and reduced bundle size by approximately 80 KiB, leading to faster render times.
How did Airbnb approach the migration to Linaria?
Airbnb adopted an incremental migration strategy, utilizing codemods to automate the transition from react-with-styles to Linaria. This approach allowed for gradual updates while ensuring component functionality and performance were maintained through extensive A/B testing.
What challenges did Airbnb face with their previous styling methods?
Airbnb encountered issues with styling conflicts, missing styles, and performance overhead due to the reliance on react-with-styles. The complexity of managing styles in a growing codebase led to bugs and inefficiencies, prompting the search for a better solution.
What features of Linaria enhance developer experience?
Linaria's use of tagged template literals allows developers to write familiar CSS syntax, improving usability. It also supports style deduplication and critical CSS injection for server-side rendering, enhancing both performance and developer productivity.
Key Statistics & Figures
Total Blocking Time improvement
22%
Linaria performed 22% better than Emotion in Total Blocking Time benchmarks.
Bundle size reduction
80 KiB
~12%
Homepage Page Performance Score improvement
0.26%
An A/B test showed a 0.26% improvement in the Page Performance Score after converting 10% of components to Linaria.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
Linaria
Used as a zero-runtime CSS-in-JS library for styling components.
Frontend
React
Framework used for building the user interface components.
Key Actionable Insights
1Consider adopting Linaria for your web projects to leverage its zero-runtime CSS-in-JS capabilities.This can lead to improved performance metrics and a better developer experience, especially for teams transitioning from traditional CSS methodologies.
2Utilize codemods to facilitate the migration process when switching styling libraries.Automating the migration can reduce manual errors and speed up the transition, ensuring that components maintain their functionality during the update.
3Implement A/B testing to validate performance improvements after migrating to a new styling framework.This practice helps ensure that the new implementation meets performance expectations and does not introduce regressions.
Common Pitfalls
1
Failing to properly manage style dependencies can lead to unexpected styling conflicts.
This often occurs when styles are not organized correctly, especially in larger codebases. To avoid this, ensure that styles are scoped to components and utilize tools that support style encapsulation.
Related Concepts
Css-in-js
Static CSS Extraction
Performance Optimization Techniques
Incremental Migration Strategies