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 - Extend an existing class or element
  • -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 directives
  • @st-import - Import external assets like mixins, stylesheets, common CSS and vars
    • default import - Import the file's default export value
    • named import - Import the file's named export value or values
    • keyframes(x1, x2) - Import named keyframe definitions from a different stylesheet
• :vars {} - Define common values to be used across the stylesheet or project
• Utility directives
  • @st-scope .x {} - Scope nested rules with a given selector
  • @namespace "readable name"; - Development display name for debugging
• formatter() - Custom JavaScript functions for generating declaration values