Refactoring CSS Locks

This content originally appeared on Welcome to my blog on Trys Mudford and was authored by Welcome to my blog on Trys Mudford

In our first Utopia.fyi release, I stumbled upon an elegant way to re-use CSS locks. In a traditional CSS lock, we have a @media query that locks the selectors when they reach the max viewport size. In this example, we go from 2em to 4em, between viewports of 20em and 80em: h2 { font-size: calc(2em + (4 - 2) * ((100vw - 20em) / (80 - 20))); } @media screen and (min-width: 80em) { h2 { font-size: 4em; } } Refactor round one First off, let’s extract the ‘screen’ part of the lock into a CSS custom property.

This content originally appeared on Welcome to my blog on Trys Mudford and was authored by Welcome to my blog on Trys Mudford