Custom variants with @custom-variant

Reusable state selectors

@custom-variant lets you name a selector pattern and then use that name as a variant throughout your markup.

Theme attributes

A common use is an application theme attribute such as data-theme="midnight". Components can then use a semantic variant rather than repeating the raw selector.

When not to use it

If a selector is used only once, an arbitrary variant may be simpler. Create a named variant when the state is part of the application's reusable styling model.