0
CSS · Advanced CSS
New technique
Custom properties
Name a value once, use it everywhere. Change it in one place, and the whole site follows.
A site uses the same ember orange in twenty places. Copy the hex code twenty times, and a colour change means twenty edits, and one you'll miss. A custom property (often called a CSS variable) gives the value a name instead.
You define it with two dashes in front of a name, and read it back with var(). Defined on :root, which is the <html> element, it's available everywhere on the page.
:root {
--ember: #d9531e;
--radius: 8px;
}
.button {
background-color: var(--ember);
border-radius: var(--radius);
}- Names are case-sensitive:
--Emberand--emberare two different properties.