Directives

ECSS adds a set of directives (at-rules) to plain CSS. Below is a brief summary and where each directive is allowed; details are on the page of the corresponding directive.

Directive	Purpose	Where allowed
@import	import declarations from another .ecss file	top level
@enum	enumeration of allowed string values	top level
@const	named constant	top level and inside @block
@block	style block (becomes a component)	top level
@param	block parameter	at the start of a @block body
@element	nested element of a block	inside @block
@if / @elseif / @else	conditional styles based on parameter values	inside @block
@external	styles of another block in the context of the current one	inside @block
@debug	debug output	inside @block

Top-level declarations

A file starts with these: @import, @enum, @const, @block. Block and enum names are written in PascalCase (Button, Theme); parameter and constant names are CSS variables with a -- prefix (--variant, --gap).

Inside a block

A @block body starts with @param declarations, followed by CSS rules and the @element, @if/@elseif/@else, @external, @const, @debug directives. Many of them can be nested within each other and within plain CSS rules:

@block Card {
  @param --active boolean;

  &:hover {
    @if (--active) {
      box-shadow: 0 0 0 2px currentColor;
    }
  }
}

Comments

Both line // and block /* … */ comments are supported. A JSDoc-style comment (/** … */) before @block, @enum, or @param becomes a hover hint in the editor:

/** Basic button. */
@block Button {
  /** Color scheme. */
  @param --variant Variant;
}