Investigate performance impact of many CSS variables

As our usage of design tokens expands, particularly within components like buttons, badges, and broadcast banners, we are increasingly populating the :root with numerous CSS custom properties. This issue aims to investigate the performance implications of maintaining a large number of CSS variables at the :root level.

The main questions raised include:

• Performance Impact: What is the performance cost, if any, of having numerous CSS variables defined at the :root level? Optimization: Should we reduce redundancy in design tokens, particularly those with similar values but different names, or should we maintain descriptive names for clarity in different use cases?
• Organization: How can we structure design tokens more efficiently? Should we continue to define every variation (e.g., button.type.background, button.type.border) or consolidate these into more generalized tokens?

Tasks

1. Performance Benchmarking: Test the performance impact of having a large number of CSS variables defined in the :root. Compare the loading times, rendering times, and potential reflow/repaint issues with varying numbers of custom properties. Refer to existing studies like:
   • Performance of CSS Variables by Lisi Linhart
   • Pragmatic, Practical, and Progressive Theming with Custom Properties by Harry Roberts (CSSWizardy)
   • 2021 CSS Variables Benchmark
   • The Power of CSS Variables for Your Website
   • How to use CSS variables like a pro
2. Analysis of Current Design Tokens: Review the existing design tokens to identify redundancies, especially in cases where multiple tokens share the same value. Consider the pros and cons of reducing the number of tokens by using generalized names versus maintaining specific, descriptive names.
3. Consideration of Future Design Needs: Evaluate how adding new themes (e.g., high contrast, dark modes) will further impact the number of custom properties.
4. Recommendation Development: Provide recommendations on whether to continue adding custom properties to :root, explore alternative structuring methods, or reduce the total number of variables.
5. Documentation: Document findings and best practices for managing CSS variables at scale. Outline a plan for possible refactoring of current design tokens to improve performance and maintainability.

Outcome

The goal of this investigation is to understand the performance implications of our current strategy for design tokens and provide actionable recommendations to optimize our use of CSS variables without sacrificing flexibility or maintainability.