---
metadata:
  - name: generator
    content: Diplodoc Platform v5.70.0
alternate:
  - https://yandex.ru/support/kit/ru/site-editor/custom-sections/utilities/inline-helpers/css-classes.md
  - href: https://yandex.ru/support/kit/ru/site-editor/custom-sections/utilities/inline-helpers/css-classes.md
    type: text/markdown
    title: Markdown version
  - href: https://yandex.ru/support/kit/ru/llms.txt?revision=r22105010
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/support/kit/ru/llms.txt?revision=r22105010


# Работа с CSS-классами 

Имена классов `skin` в примерах приведены в читаемом виде. Хелперы возвращают имена из CSS Modules (зависят от сборки). В режиме конструктора `skinAspectRatio` также может добавлять класс предпросмотра.

### cn {#cn}

#|
|| **Описание** | **Сигнатура** ||
|| Формирует строку CSS‑классов (через пробел). Все аргументы приводятся к строкам.
Пустая строка пропускается; `false`, `null`, `undefined`, `0` попадают в результат.
Для условного класса передавайте пустую строку в альтернативной ветке. | `{{cn class1 class2 ...classN}}` ||
|#

{% cut "Параметры" %}

#|
|| **Параметр** | **Тип** | **Описание** ||
|| `class1..N` | Any | Значения, преобразуемые в имена классов. ||
|#

{% endcut %}

{% cut "Примеры" %}

```handlebars
{{cn "card" "card--active"}}
{{!-- Результат: "card card--active" --}}

{{!-- Данные: { isPrimary: true, isLarge: false } --}}
{{cn "button" (when isPrimary "button--primary") (when isLarge "button--large")}}
{{!-- Результат: "button button--primary" --}}

{{cn "header" false undefined "header--sticky"}}
{{!-- Результат: "headerfalse undefinedheader--sticky" --}}

```

{% endcut %}

### skinAspectRatio {#skinAspectRatio}

#|
|| **Описание** | **Сигнатура** ||
|| Возвращает CSS-класс для заданного соотношения сторон контейнера. Применяется для изображений, видео и медиа-блоков. | `{{skinAspectRatio ratio}}` ||
|#

{% cut "Параметры" %}

#|
|| **Параметр** | **Тип** | **Описание** ||
|| `ratio` | AspectRatio | Соотношение сторон. ||
|#

{% endcut %}

{% cut "Допустимые значения `ratio`" %}

#|
|| **Значение** | **Пропорция** | **Типичное использование** ||
|| `3:4` | Вертикальное. | Портретные фото, карточки товаров. ||
|| `1:1 ` | Квадрат. | Аватары, иконки. ||
|| `4:3` | Классическое. | Фотографии, превью. ||
|| `16:9` | Широкоформатное. | Видео, баннеры. ||
|| `2:1` | Панорамное. | Широкие баннеры. ||
|| `5:2` | Ультраширокое. | Промо-секции. ||
|| `7:2` | Ультраширокое. | Хедер-баннеры. ||
|| `7:3` | Широкое. | Баннеры среднего формата. ||
|| `5:1` | Полоса. | Тонкие промо-полосы. ||
|| `7:1` | Узкая полоса. | Разделители. ||
|| `"10:1"`|Узкая полоса. | Очень широкие баннеры. ||
|| `fit-screen` | По экрану. | Полноэкранные секции. ||
|#

{% endcut %}

{% cut "Примеры" %}

```handlebars
{{skinAspectRatio "16:9"}}
{{!-- Результат: ".skin_aspect-ratio_16:9" --}}
 
{{skinAspectRatio "1:1"}}
{{!-- Результат: ".skin_aspect-ratio_1:1" --}}

{{skinAspectRatio "fit-screen"}}
{{!-- Результат: ".skin_aspect-ratio_fit-screen" --}}

```

{% endcut %}


### skinBackground {#skinBackground}

#|
|| **Описание** | **Сигнатура** ||
||  Возвращает CSS-класс фона для секции или блока. | `{{skinBackground color}}` ||
|#

{% cut "Параметры" %}

#|
|| **Параметр** | **Тип** | **Описание** ||
|| `color` | BackgroundSkin | Тип фона. ||
|#

{% endcut %}

{% cut "Допустимые значения `color`" %}

#|
|| **Значение** | **Описание** ||
|| `none` | Без фона (прозрачный). ||
|| `"white"` | Белый фон ||
|| `primary` | Основной цвет фона. ||
|| `secondary` | Вторичный цвет фона. ||
|| `neutral` | Нейтральный фон. ||
|#

{% endcut %}

{% cut "Примеры" %}

```handlebars

{{skinBackground "primary"}}
{{!-- Результат: "skin_background_primary" --}}

{{skinBackground "none"}}
{{!-- Результат: "skin_background_none" --}}

```

{% endcut %}

{% note info %}

Класс только определяет CSS переменную `--ys-current-skin-fill`, для применения фона укажите стиль.

`background-color: var(--ys-current-skin-fill)`

{% endnote %}

### skinBorderColor {#skinBorderColor}

#|
|| **Описание** | **Сигнатура** ||
||  Возвращает CSS-класс цвета обводки для блока. | `{{skinBorderColor color}}` ||
|#

{% cut "Параметры" %}

#|
|| **Параметр** | **Тип** | **Описание** ||
|| `color` | BorderSkin | Тип обводки. ||
|#

{% endcut %}

{% cut "Допустимые значения `color`" %}

#|
|| **Значение** | **Описание** ||
|| `none` | Без обводки. ||
|| `primary` | Обводка основным цветом. ||
|| `secondary` | Обводка вторичным цветом. ||
|#

{% endcut %}

{% cut "Примеры" %}

```handlebars

{{skinBorderColor "primary"}}
{{!-- Результат: "skin_border_primary" --}}

{{skinBorderColor "none"}}
{{!-- Результат: "skin_border_none" --}}

{{skinBorderColor "secondary"}}
{{!-- Результат: "skin_border_secondary" --}}

```

{% endcut %}

### skinRounded {#skinRounded}

#|
|| **Описание** | **Сигнатура** ||
||  Возвращает CSS-класс скругления углов. Учитывает **степень скругления** и **тип скругления** из глобальных настроек. | `{{skinRounded rounded}}` ||
|#

{% cut "Параметры" %}

#|
|| **Параметр** | **Тип** | **Описание** ||
|| `rounded` | RoundedSkin | Степень скругления. ||
|#

{% endcut %}

{% cut "Допустимые значения `rounded`" %}

#|
|| **Значение** | **Описание** ||
|| `0` | Без скругления. ||
|| `25` | Минимальное. ||
|| `50` | Малое. ||
|| `75` | Среднее малое. ||
|| `100` | Среднее. ||
|| `150` | Среднее большое. ||
|| `200` | Большое. ||
|| `250` | Очень большое. ||
|| `999` | Максимальное (круг). ||
|#

{% endcut %}

{% cut "Примеры" %}

```handlebars
{{!-- Глобальная настройка roundedType: "normal" --}}
{{skinRounded "100"}}
{{!-- Результат: "skin_border-radius-normal_100" --}}

{{skinRounded "0"}}
{{!-- Результат: "skin_border-radius-normal_0" --}}

{{skinRounded "999"}}
{{!-- Результат: "skin_border-radius-normal_999" --}}

```

{% endcut %}

{% note info %}

Класс только определяет CSS переменную `--ys-current-skin-border-radius`. Для применения скругления укажите стили.

`border-radius: var(--ys-current-skin-border-radius)`

{% endnote %}

<!-- source: ru/_includes/support.md -->


## Обратиться в службу поддержки


[Написать в чат](https://yandex.ru/chat/#/user/6c041b05-07a4-99cc-79be-8670b7aff93d){.button}

[Написать письмо](https://yandex.ru/support/kit/ru/feedback.md){.button}

[Яндекс KITᵝ в Telegram](https://t.me/kityandex_support_bot){.button}

[Яндекс KITᵝ в МАКС](https://max.ru/yandex_kit_bot){.button}
<!-- endsource: ru/_includes/support.md -->