Let's start here. I'll make a couple quick mentions of JavaScript, but this talk is about CSS. It's good and keeps getting better. We're in a time when “right now” is always the best time for CSS. This is thanks to numerous individuals and groups putting in mostly thankless hours to make sure CSS keeps getting better.

You define custom props within any selector using the double dash "--" prefix followed by any valid characters. Valid characters are any chars not used in other parts of CSS like brackets "{}". You might see examples with custom props defined in a :root selector. That works, but you don't have to define them there. Property names are case-sensitive.

CSS Custom Properties are often referred to as "variables." That's easiest to say, but it's important to understand they work like variables like you're used to in other languages. Custom props can't be used in CSS selectors. And they can't be used for string interpolation. As of right now, the best way to think of them is custom property values. You use them to store and re-use CSS property values.

Custom props have block scope. So defining a property within the .sibling-of-slide-4 selector means it won't be available in a .slide-4 selector.

The var function takes an second–optional–argument. A default value to use in case the requested property is undefined.

The var function takes an second–optional–argument. A default value to use in case the requested property is undefined.

const style = getComputedStyle(document.body);
style.getPropertyValue('--bg-color'));

document.querySelector('body')
  .style.setProperty('--title-fill', 'orange');