In short
CSS custom properties (`--main-color: #7E39FE;`) let you define reusable values and update them dynamically, including via JavaScript or media queries. In modern JavaScript, `const` and `let` are usually preferred because block scoping makes variable lifetime easier to reason about and reduces accidental reassignment.
How to learn this
- 1Refactor a stylesheet's hardcoded colors into `:root` custom properties. Validate your understanding by applying it in a small practical example.
- 2Use variables to build a simple light/dark theme toggle. Verify the behavior with realistic data and handle the failure or empty state as well.
- 3Learn variable scoping — they cascade and can be overridden per component.
More topics at this stop
Stuck on this topic? Ask an Insider
Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.
