Skip to main content

Specification Overview

CSS Terminology

  • Simple selector: Type selector, class selector (+Stylable root class)
  • CSS property: Name of the rule (e.g. color)
  • CSS declaration: CSS property paired with a value
  • CSS declaration Block: List of CSS declarations
  • CSS ruleset: CSS declaration block paired with a selector

MDN docs

Stylable

Syntax unique to Stylable - Click each to access code examples and descriptions

  • Directive rules -st-* Instructions for the Stylable pre-processor, removed during transpilation
  • Selectors
    • .xX - Class selectors
    • X - Tag/component selectors
    • ::X - Target internal part (pseudo-element)
    • :X - Target states including native and custom (pseudo-classes)
    • :--X - Selector alias (custom selector)
    • :global(X) - Keep selector global
  • Import directives
    • @st-import - Import external assets like mixins, stylesheets, common CSS and vars
  • :vars {} - Define common values to be used across the stylesheet or project
  • Utility directives
  • formatter() - Custom JavaScript functions for generating declaration values