Custom properties

CSS Variables (also known as CSS Custom Properties) are a powerful feature of CSS that allow you to define reusable values and reference them throughout your stylesheets. This can help reduce repetition and make your code easier to read and maintain.

Basic Usage

link Basic Usage

To create a CSS variable, you define a custom property name that begins with two dashes (--), followed by a value. For example:

my-props.css

:root {
  --primary-color: #007bff;
}

.button {
  background-color: var(--primary-color);
}

In this example, we define a variable called --primary-color on the :root selector, which makes it available globally. We then use the var() function to reference the variable inside the background-color property of the .button selector.

OxyProps naming convention for CSS Variables

• All CSS Variables from the framework design tokens library are prefixed with --o- in order to avoid conflicts with yout own variables, or variables from other stylesheets or frameworks.

• When OxyProps components (like buttons for example) “expose” CSS properties, they are prefixed with --_. This smart naming convention comes from this great article by Lea Verou, and allows you to easily identify which variables are exposed by OxyProps components.

• When creating your own CSS Variables, we recommend using the --c- (c for custom) prefix to avoid conflicts with variables from other stylesheets or frameworks.

Scope and Inheritance

link Scope and Inheritance

CSS Variables are scoped to the element(s) they are declared on and participate in the cascade. This means that the value of a variable is determined by the cascading algorithm, just like any other CSS property.

Variables are also subject to inheritance, which means that if a variable is not set on a given element, the value of its parent element will be used instead. For example:

my-props.css

:root {
  --c-my-primary-color: #007bff;
}

.button {
  background-color: var(--c-my-primary-color);
}

.button.secondary {
  --c-my-primary-color: #dc3545;
}

In this example, we define a variable called --c-my-primary-color on the :root selector, and use it for the background-color property of the .button selector.

We then define a new class called .button.secondary and set a different value for --c-my-primary-color on that class. Because .button.secondary inherits from .button, it will still use the background-color value defined for .button, but with the new value of --c-my-primary-color.

Benefits of Using CSS Variables

link Benefits of Using CSS Variables

Using CSS Variables can have a number of benefits for your CSS codebase. Here are a few:

• Reduced repetition: By defining variables for commonly used values (like colors, font sizes, or spacing), you can avoid repeating the same value over and over again in your stylesheets.
• Semantic naming: Variables allow you to give meaningful names to values, which can make your code easier to read and understand. For example, --primary-color is more descriptive than #007bff.
• Easy customization: Because variables are defined in one place and referenced throughout your stylesheets, changing a value (like a color) is as simple as updating the variable definition.

Tips and Best Practices

link Tips and Best Practices

Here are a few tips and best practices for using CSS Variables effectively:

• Define variables on the html or :root selector to make them available globally.
• Use semantic names for variables to make your code more readable.
• Use fallback values in case a variable is not set, like this: background-color: var(--c-primary-color, #007bff);.
• Use variables sparingly, and only for values that are used multiple times.
• Don’t use variables for values that change frequently, like top, left, or transform values.

Conclusion

link Conclusion

CSS Variables are a powerful tool for creating more maintainable and readable CSS. By defining reusable values and referencing them throughout your stylesheets, you can reduce repetition and make it easier to update your styles in the future. With a few best practices in mind, you can use CSS Variables to create more modular, scalable, and maintainable stylesheets.