Skip to main content


CSS Terminology

  • selector: query to target elements in the DOM
  • property: Name of the declaration (e.g. color)
  • declaration: CSS property paired with a value
  • declaration Block: List of CSS declarations
  • ruleset: CSS declaration block paired with a selector

See MDN How CSS is structured and css-tricks Ruleset Terminology for detailed explanation of CSS naming and structure.


Syntax that is unique to Stylable or extended from CSS.


.x {}
Class selector (api)
x {}
Element type selector (api)
:x {}
Pseudo-class or custom state selector (api)
::x {}
Pseudo-element or custom-element selector (api)
:--x {}
custom selector (api)
:global() {}
disables selector namespacing (api)

Module system

@st-import X from './';
Import stylesheet's root (api)
@st-import [x, y] from './';
Import named exports (api)
@st-import X, [y, z] from './';
Import default & named (api)
@st-import [x as local-x] from './';
Local alias for named import (api)
@st-import [keyframes(x1, x2)] from './';
Import keyframes (api)
@st-import [layer(x1, x2)] from './';
Import layers (api)
@st-import [container(x1, x2)] from './';
Import containers (api)

Class extensions

-st-extends: Gallery;
Extend an existing class (api)
-st-states: stateA, stateB;
Define custom pseudo-classes (api)


:vars { x: red; y: blue; }
Build time variables definition (api)
prop: value(x);
Insert var value into declaration (api)
prop: x(arg1, arg2);
Computed value from custom formatter (api)
-st-mixin: x, y;
Apply multiple mixins to CSS ruleset (api)
-st-mixin: x(param v1, param v2);
Apply mixins with override params (api)


@st-scope .x {}
Scope nested rules with a given selector (api)
@st-namespace "x";
Development display name for debugging (api)