ECSSv0.2

🇬🇧 English

🇷🇺 Русский

🇬🇧 English

🇷🇺 Русский

Appearance

Inheritance (extends) ​

The extends keyword lets one block or enum extend another. The parent must be declared in the same file or imported via @import.

Block inheritance ​

@block Child extends Parent receives all of the parent's styles and parameters and adds its own:

ecss
@block Pressable {
  @param --disabled? boolean;

  cursor: pointer;

  @if (--disabled) {
    cursor: not-allowed;
    opacity: 0.4;
  }
}

@block Button extends Pressable {
  @param --variant Variant;

  padding: 8px 16px;
  border-radius: 6px;
}

EButton accepts both variant and the inherited disabled. Inheritance can be chained: A extends B extends C.

Name conflicts. Redeclaring an inherited @param with the same name in a child block is not allowed — it is a compilation error.

Enum inheritance ​

@enum Child extends Parent merges the values: the child adds its own to the parent's set.

ecss
@enum BaseSize {
  values: "sm", "md", "lg";
}

@enum ButtonSize extends BaseSize {
  values: "xl"; // result: sm, md, lg, xl
}

Values already present in the parent are ignored without an error when repeated.

extends or @external? ​

These are two different mechanisms:

  • extends — inheritance. The child block absorbs the parent's styles into itself; the parent becomes part of the child.
  • @external — contextual styling. The block is not inherited; it is merely augmented with styles wherever it is nested inside the current block.

Use extends when building a new component on top of an existing one; use @external when you need to tweak the appearance of someone else's component inside your own.

See also ​