CSS Custom Properties & Variables Flashcards

Which CSS function allows you to perform arithmetic using custom property values?

Answer: calc()

The `calc()` function lets you perform arithmetic (add, subtract, multiply, divide) with custom property values, e.g., `width: calc(var(--base) * 2)`.

What happens when you use `var()` to reference a custom property that hasn't been declared?

Answer: The property uses the fallback value if provided, otherwise it becomes invalid and the declaration is ignored

If a referenced custom property is undefined and no fallback is given, the `var()` call is invalid at computed time and the CSS property is treated as if it has its initial value.

Can CSS custom properties be read and modified with JavaScript?

Answer: Yes, using getPropertyValue() and setProperty() on the element's style

JavaScript can read a custom property with `getComputedStyle(el).getPropertyValue('--name')` and set it with `el.style.setProperty('--name', value)`.

Which CSS feature introduced native custom properties (variables) to the language?

Answer: CSS Custom Properties Level 1 specification (CSS Variables)

CSS Custom Properties for Cascading Variables (Level 1) is the W3C specification that introduced native `--variable` syntax to CSS.

Do CSS custom properties inherit by default?

Answer: Yes, they inherit just like color or font-size

CSS custom properties inherit by default, so a variable set on a parent element is automatically available to all its descendants.

What is the correct syntax to use a custom property inside a `calc()` expression?

Answer: calc(var(--size) + 10px)

Inside `calc()`, you must wrap the custom property with `var()` — you cannot reference `--size` directly without the function.