In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. With some of the mistakes we’ve made, and some of the unexpected changes that helped boost all the metrics across the board.
In this article I’d like to talk about the biggest caveat of Atomic CSS - precisely Atomic CSS generated by CSS-in-JS libraries. It’s about CSS specificity, shorthand and longhand properties in CSS and how those libraries generate Atomic CSS.
Design tokens are used to keep a consistent look across an entire system. How do you name them semantically if they have to make sense everywhere but also respond to the inner logic of individual components which are independently developed?