Skip to main content

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

SyntaxExplanations
.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

SyntaxExplanations
@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

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

Templating

SyntaxExplanations
: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

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