react

Roll Your Own CSS-in-JS Library (3) - Using CSS Variables

Saturday, March 13, 2021

In this post we will discard our changes in the previous post and switch to a new approach. End result CSS variables CSS variables are also known as CSS Custom Properties. At a very high level: We can set some value on a variable using --variable-name: value. The variable name has to start with --, and the definition has to happen within some selector or as inline styles. We can then read the value of a variable and supply it to some CSS property with the var() function, e.…

Roll Your Own CSS-in-JS Library (2) - Dynamic Styles

Friday, March 12, 2021

In our last post we developed a simple CSS-in-JS library, but it was missing an important feature - supporting dynamic styles. We will patch that in this post. End result Dynamic styles are more useful when we are building components. In this post, we will use React as our component library. Here’s how our library may be used in production: Dynamic class names This is the simplest approach that requires making the smallest change to our little library.…