Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;
) and are accessed using the var()
function (e.g., color: var(--main-color);
).
Complex websites have very large amounts of CSS, often with a lot of repeated values. For example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. Custom properties allow a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic identifiers. For example, --main-text-color
is easier to understand than #00ff00
, especially if this same color is also used in other contexts.
Custom properties are subject to the cascade and inherit their value from their parent.
Note: Variables do not work inside media queries and container queries. The var()
function can be used in place of any part of a value in any property on an element. The var()
function cannot be used as property names, selectors, or anything else besides property values. So, we can't use it in a media query or container query.