CSS <dashed-ident> Data Type

The CSS <dashed-ident> data type represents an author-defined identifier that begins with two hyphens (--). It provides a naming convention for custom CSS features and helps prevent author-defined names from conflicting with identifiers defined by CSS.

Syntax

A <dashed-ident> follows CSS identifier syntax but must begin with two hyphens:

<dashed-ident> = -- <ident-token>

Examples of dashed identifiers include:

--main-color
--sidebar
--theme-dark
--my-counter
--custom-name

Valid Identifiers

The characters following the required -- prefix follow the rules for CSS identifiers. Letters, digits, hyphens, underscores, escaped characters, and non-ASCII characters can be used where permitted by CSS identifier syntax.

The two leading hyphens are part of the identifier itself. For example, --theme and theme are different identifiers.

Dashed Identifiers and Custom Identifiers

The <dashed-ident> data type is related to <custom-ident>, but the required -- prefix gives dashed identifiers a distinct naming convention. CSS features can use this convention when author-defined names need to be clearly separated from CSS-defined keywords.

Because the dashed namespace is reserved for author-defined names, CSS specifications do not define their own identifiers beginning with two hyphens.

<dashed-ident> Uses

Dashed identifiers are used by several CSS features that allow authors to create names. Examples include custom properties, registered custom properties, view transition names, and other extensible CSS features.

--brand-color
--content-width
--card-transition

The CSS feature using the identifier determines what the name represents and how it can be referenced.

<dashed-ident> Example

A common example of the dashed identifier naming convention is a CSS custom property:

:root {
  --brand-color: #0088cc;
}
.example {
  color: var(--brand-color);
}

In this example, --brand-color uses the dashed identifier naming convention. The custom property is declared with that name and referenced using the var() function.

Dashed identifiers can also appear in CSS features such as @property:

@property --accent-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #0088cc;
}

Specifications

The <dashed-ident> data type is defined in the CSS Values and Units Module Level 4 .