Over two days, the Clarity 2023 design systems conference brought together presentations on a variety of topics, including why we should leverage browser standards (1, 2) and invest in accessibility (1, 2, 3), understanding that perfection is not the goal of a design system (1), how we can leverage a diverse variety of voices for better UX (1), and proposing new ways of categorizing design tokens (1). It also included how to understand the business-end stakeholders (1) and plan roadmaps together (1).
This was my impression of Danny Banks’ “A Love Letter to CSS Variables” presentation.
CSS can do a lot
CSS inheritance and resolution. Runtime macros. CSS variables.
Danny covered many of the technical details of the first proposal of CSS Variables (W3C Working Draft, April 2012!) to its modern implementation in the browser. He reviewed how browsers resolve CSS variables, why you can’t access a variable in a media query, and how to use variables in CSS functions. Then, he showed some more advanced ways to hide complex calculations inside other variables:
He reflected on how the browser will always be the fastest way to lay out and style web pages and that there is a long-lasting API contract between the browser and CSS authors.
My commentary: The tug of innovation in web libraries changes the direction of CSS, and that’s a good thing. Ultimately, the most useful CSS APIs should be added to the CSS spec to ensure that people can continue to rely on them for years to come. I think this is especially true now that any library can be at risk of being sunset. We must continue to push for open standards; otherwise, we will keep reinventing the wheel.
Sketch notes by Raquel
Follow Raquel: https://medium.com/@raquel
Thanks to Danny Banks for the use of his slide materials and his review. You can learn more about Danny on his website: https://dbanks.design/
