@element

The @element directive declares a named nested element inside a @block.

Syntax

@block Button {
  @element Name {
    /* CSS styles for the element */
  }
}

Several elements can be declared in a single directive:

@block Button {
  @element Icon, Text {
    display: flex;
    align-items: center;
  }
}

Element name

The name must start with a capital letter (PascalCase): Icon, Text, Label.

A single name may appear in a block several times — it is the same element, and styles from all occurrences are combined.

Usage

@block Button {
  @param --with-icon boolean;

  @element Text {
    font-weight: 600;
  }

  @element Icon {
    display: flex;
    align-items: center;
    width: 20px;
    height: 20px;
  }

  @if (--with-icon) {
    gap: 8px;
  }
}

Block parameters inside @element

Inside @element, the parent block's parameters are available — both as property values and in @if conditions:

@block Button {
  @param --active boolean;
  @param --accent? color: #646cff;

  @element Icon {
    width: 20px;
    color: --accent; // no var() needed

    @if (--active) {
      opacity: 1;
    }
  }
}

@element inside @if

Element styles can depend on a block parameter:

@block Button {
  @param --with-icon boolean;

  @element Icon {
    display: flex;
  }

  @if (--with-icon) {
    @element Icon {
      color: #646cff;
    }
  }
}

@element in nested rules

Elements can be declared inside CSS nesting. & inside @element refers to the element itself:

@block Button {
  @element Text {
    color: inherit;

    &:hover {
      color: #646cff;
    }
  }

  &:disabled {
    @element Text {
      color: gray;
    }
  }
}

Redeclaration

A single name may appear several times — it is the same element, and all style occurrences are applied to it:

@block Button {
  @element Text {
    color: red;
  }

  &:hover {
    @element Text {
      color: blue;
    }
  }
}

Inheritance

The parent block's elements are available in the descendant and can be extended with additional styles:

// Base.ecss
@block Base {
  @element Label {
    font-size: 14px;
  }
}

// Button.ecss
@import { Base } from "./Base.ecss";

@block Button extends Base {
  @element Label {
    font-weight: 600;
  }
}

Example

@block Card {
  @param --highlighted boolean;

  @element Icon {
    display: flex;
    align-items: center;
    width: 24px;
    height: 24px;
  }

  @element Text {
    font-size: 14px;
    line-height: 1.5;
  }

  @if (--highlighted) {
    @element Text {
      font-weight: 600;
      color: #646cff;
    }
  }
}

React

import { ECard } from './Card.ecss';

<ECard params={{ highlighted: true }}>
  <ECard.Icon>...</ECard.Icon>
  <ECard.Text>Click</ECard.Text>
</ECard>;

See also

• @block — the parent block
• @if — conditional styles for elements
• React adapter — sub-components in React