Want to write a hover ef­fect with in­line CSS? Use CSS Variables.

I just pub­lished a lit­tle tech­nique for push­ing what you can do with CSS in­line styles over on CSS Tricks. Here’s how I pitched it:

Say you have a blog, and you want each post to have a dif­fer­ent back­ground colour when you hover over it - for art di­rec­tion, say. You can’t do that with in­line styles! But I learned a trick: You write the colour value into a CSS vari­able (scoped to the post el­e­ment), then use that to de­fine the hover ef­fect in your reg­u­lar CSS.

This works for hover ef­fects, but comes in handy in other sit­u­a­tions too. For in­stance, I use it to achieve the position: sticky ef­fect on this site. That’s in fact where I learned the trick.

I go into a lit­tle more de­tail in the ar­ti­cle.