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
  • -st-extends Simple selector base class
  • -st-states Define custom pseudo-classes
  • -st-mixin Apply mixins to CSS ruleset
• 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