What are CSS custom properties?

CSS custom properties, also known as CSS variables, are entities defined by web developers that contain specific values to be reused throughout a stylesheet. Unlike standard CSS properties, which are predefined and have specific purposes (like ‘color’ or ‘font-size’), custom properties allow you to define your own properties with names you choose. These are extremely useful for managing and reusing styles, especially across larger projects.

You define a custom property by starting its name with two dashes (--) followed by your chosen name (e.g., --main-color, --base-font-size). These properties are then assigned a value using standard CSS syntax. You can then use this custom property value anywhere else in your CSS using the var() function. For example, if you declare --main-color: blue;, you can use var(--main-color) anywhere you need a color setting. This way, if you decide to change your brand's primary color, you only have to change the custom property definition, instead of updating each instance where that color appears.

The scope of custom properties is determined by the selector they are defined under. If defined in the :root pseudo-class (at the top level of your CSS), they become globally accessible. If defined within a specific selector (like .container or #header), they are only accessible within that selector's scope and its child elements, which makes them a versatile tool for both theme and component-based styling. Custom properties also support cascading, just like standard properties, allowing overrides within more specific scopes. The ability to manage and override these properties makes them a powerful feature for creating adaptable and maintainable CSS code. Using CSS custom properties helps in making your styles much more manageable and scalable, which reduces the overall complexity of your code.