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


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 {} Import external assets like mixins, stylesheets, common CSS and vars
    • -st-from Location of file to import
    • -st-default Import the file's default export value
    • -st-named Import the file's named export value or values
  • @namespace "readable name"; Development display name for debugging
  • :vars{} Define common values to be used across the stylesheet or project
  • formatters Custom TypeScript/JavaScript functions for generating declaration values