How Do CSS Scoped Custom Properties Handle Inheritance and Overriding?

CSS Scoped Custom Properties: Understanding Scope and Inheritance

When defining CSS custom properties, understanding their scope is crucial for achieving desired effects. Custom properties declared within an element are scoped to that element and its descendants. However, this scoping can sometimes lead to unexpected behavior, as illustrated in this question.

The issue stems from the fact that in the provided code, the custom property --scale is defined at the root level and then overridden within child elements. This overriding behavior is not expected when using scoped custom properties.

To demonstrate this issue, let's analyze the CSS:

:root {
  --size-1: calc(1 * var(--scale, 1) * 1rem);
  --size-2: calc(2 * var(--scale, 1) * 1rem);
  --size-3: calc(3 * var(--scale, 1) * 1rem);
}

.scale-1x {
  --scale: 1;
}

.scale-2x {
  --scale: 2;
}

.scale-3x {
  --scale: 3;
}

Here, the --size-* properties depend on the value of --scale. However, when defining --scale inside the .scale-1x, .scale-2x, and .scale-3x classes, it overrides the value defined in :root.

The expected behavior would be for the --scale property to be evaluated at each element where it is defined, resulting in different font sizes for each list. However, this does not occur because the custom property is already evaluated at the root level.

To address this issue and achieve the desired effect, consider using scoped custom properties more consistently. For example, define --size-1, --size-2, and --size-3 within each .scale-* class, ensuring they are scoped to that element only. This will allow for independent scaling of each list based on the value of --scale defined within its respective class.

The above is the detailed content of How Do CSS Scoped Custom Properties Handle Inheritance and Overriding?. For more information, please follow other related articles on the PHP Chinese website!