Summary & Key Takeaways ​

• CSS custom properties can be computed at different times, affecting their final value.
• The article demonstrates how var() substitution and evaluation context play a role.
• It uses sibling-index() as an example to illustrate the default computation behavior.
• getComputedStyle() can show the token stream value before final computation.
• Understanding these timings is crucial for predictable and performant CSS.

Our Commentary ​

Jake Archibald always delivers. This deep dive into CSS custom property computation is exactly the kind of nuanced detail that can trip up even experienced developers. Knowing when things are computed, not just what, is essential for writing robust and performant styles. I appreciate the clarity here.