Intro to CSS Custom Properties

Advantages and implementation of CSS Custom Properties.

Like in SCSS, where developers are able to create their own variables and using them in projects to facilitate a global management of color, sizes and typographies, native CSS also offers a similar feature with even more advantages.

The first feature about CSS variables to mention is that they follow the Cascade functionality of CSS, meaning that developers are able to use them as global variables or modifying them in specific selectors, generating non-intrusive exceptions in the styles. Beside that, there is the option to modify CSS variables values in media queries, giving a complete control over them for developers.

:root {
    --text-color: black;
}

p {
    color: var(--text-color);
}


// --------------------
// Overriding a token to apply a style exception 
// --------------------

p.title {
    --text-color: red;
}

Another big advantage is that CSS variables, at being a native CSS functionality, can be modified directly with JavaScript and make the style changes visible in real time, something that is not possible with standard SCSS variables.

These features are the reason why CSS Custom Variables have been included into the Sipster Design System, turning them into the heart and soul of the new theming feature that will be inserted in most of 2600Hz projects, offering to developers more flexibility at the moment of creating and applying themes in real time for the projects, and also adapting 2600Hz to the current tendencies in the UX/UI design world.

Besides that, clients with their own development teams are going to be able to create custom themes for a better branding in their apps, just by creating a new CSS file and overwriting certain and specific CSS variables facilitated in the official themes in sds-themes repository. Something in other times might took lots of work, now will be able to be applied in a few minutes.