Overview
CSS variables—formally custom properties—are names you define (for example--primary or --border-2) and read with var(--name). They let you centralize tokens: change the value in one place and every rule that references it updates.
Declare them on :root for global tokens, or on any selector to scope them to a subtree. Combine with calc() when a value should derive from a token (calc(var(--spacing-unit) * 2)).
How bundled utilities use variables
Some shipped utilities resolve through variables so widths and tokens stay consistent. Border width classes use named border tokens—for examplevar(--border-1), var(--border-2), and so on—so the same scale can stay aligned across the bundle. See the class table in Border width.
That pattern—utilities pointing at variables—means a token update can propagate everywhere those utilities are used, without renaming classes.
Authoring custom utilities
When you write CSS for Skelementor to import, custom properties are a good way to keep brand colors, spacing bases, and motion values consistent. Practical syntax and short examples are in Writing CSS under CSS Custom Properties; this page is the conceptual home for why (tokens, reuse, theme layers).Elementor “Variables” vs class names
Elementor can store design tokens as Variables and, when you import from Skelementor, you may enable importing into that system alongside Global Classes. The detailed import steps are in Quickstart (import). Naming reminder: restrictions on utility class names (for example reserved words likecontainer) are documented in Reserved names. CSS variable names follow normal CSS rules and are separate from class naming—avoid confusing the Elementor Variables UI with arbitrary class identifiers.
Related
Writing CSS
Custom properties examples and utility format
Custom CSS
Importing your own utilities into Elementor
Border width
var(--border-*) and the border scaleColors
Semantic palette and utility naming
Quickstart (import)
Classes, variables, and Elementor import options