@block

Директива @block объявляет именованный компонент стилей. Это основная конструкция ECSS.

Синтаксис

@block Name {
  /* содержимое */
}

С наследованием:

@block Child extends Parent {
  /* содержимое */
}

Имя блока

Имя @block обязательно начинается с заглавной буквы (PascalCase): Button, Card, NavItem. Все имена @block в одном файле должны быть уникальными.

Тело блока

Внутри @block допустимы:

Элемент	Описание
CSS-декларации	color: red;, display: flex; и т.д.
CSS-правила	&:hover { }, & > .child { }
@param	Объявление параметра
@element	Объявление вложенного элемента
@if / @elseif / @else	Условные стили
@const	Локальная константа
@debug	Вывод в консоль при отладке
@external	Контекстные стили для другого блока

Параметры

Параметры объявляются через @param внутри тела блока. Они управляют тем, какие CSS-правила применяются к компоненту.

@enum Variant {
  values: "primary", "secondary";
}

@block Card {
  @param --variant Variant;
  @param --elevated boolean;

  padding: 24px;
  border-radius: 12px;
  background: #fff;

  @if (--elevated) {
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.1);
  }

  @if (--variant == "primary") {
    border: 2px solid #646cff;
  }
}

Подробнее о синтаксисе параметров — в справочнике @param.

Наследование (extends)

@block может расширять другой блок — потомок получает все стили родителя плюс добавляет свои. Родительский блок должен быть объявлен в том же файле или импортирован через @import.

@block Pressable {
  cursor: pointer;
  user-select: none;

  &:active {
    transform: scale(0.98);
  }
}

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

  display: inline-flex;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
}

Параметры родителя наследуются потомком — объявить @param с тем же именем в дочернем блоке нельзя:

@block Pressable {
  @param --disabled boolean;
}

@block Button extends Pressable {
  @param --disabled boolean; // ошибка: --disabled уже унаследован от Pressable
}

Цепочка наследования

Блоки можно выстраивать в цепочку — каждый следующий расширяет предыдущего:

@block Base { /* ... */ }
@block Enhanced extends Base { /* ... */ }
@block Specialized extends Enhanced { /* ... */ }

Пример

// Alert.ecss
@enum Status {
  values: "default", "success", "warning", "error";
}

/** Карточка уведомления. */
@block Alert {
  @param --status Status;
  @param --dismissible boolean;

  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid transparent;

  @if (--status == "success") {
    background: #f0fff4;
    border-color: #68d391;
    color: #276749;
  }

  @if (--status == "warning") {
    background: #fffaf0;
    border-color: #f6ad55;
    color: #7b341e;
  }

  @if (--status == "error") {
    background: #fff5f5;
    border-color: #fc8181;
    color: #9b2c2c;
  }

  @if (--dismissible) {
    padding-right: 40px;
  }
}

React

import { EAlert } from './Alert.ecss';

function App() {
  return (
    <EAlert params={{ status: 'success', dismissible: true }}>
      Операция выполнена успешно
    </EAlert>
  );
}

См. также

• @param — объявление параметров
• @element — вложенные элементы
• @if — условные стили
• @import — импорт блоков из других файлов