Cheatsheet

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

Syntax that is unique to Stylable or extended from CSS.

Selectors

Syntax	Explanations
.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

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

Class extensions

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

Templating

Syntax	Explanations
: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)

Other

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