frontend-style-guide/OLD_parts/5-code-style.md

---
title: Стиль кода
---

# Стиль кода

## Отступы

  Используем 2 пробела для отступов во всём проекте. Не используем табы.


## Кавычки

Используем **одинарные кавычки** для строк в JavaScript/TypeScript, и **двойные кавычки** для атрибутов в JSX/TSX.

**Пример:**

```ts
// JavaScript/TypeScript
const message = 'Привет, мир!';
const name = 'ProjectName';
```

```tsx
// JSX/TSX
<input type="text" placeholder="Введите имя" />
<button title="Сохранить">Сохранить</button>
```

## Строгая типизация

всегда указывать типы для пропсов, возвращаемых значений, параметров функций.

## Ранние возвраты

(early return) для повышения читаемости.

## Мемоизация

Старайся оптимизировать код если это возможно.

## Документирование

Документируем ТОЛЬКО ОПИСАНИЕ (функций, компонентов, типов и их полей).

## any, unknown

запрещено использовать без крайней необходимости.

## Классы в TSX

Для стилизации компонентов используем CSS-модули и методологию BEM. Классы подключаются через объект стилей, импортированный из соответствующего `.module.css` файла.

> Объект стилей всегда импортируется с именем `s` (сокращённо от style), а не `styles`.

**Пример:**

```tsx
import s from './my-component.module.css';

export const MyComponent = () => (
  <div className={s['my-component']}>
    <button className={s['my-component__button']}>Кнопка</button>
    <span className={s['my-component__text']}>Текст</span>
    <button className={s['my-component__button'] + ' ' + s._active}>
      Активная кнопка
    </button>
  </div>
);
```

- Имя класса всегда берётся из объекта `s`.
- Для модификаторов используется отдельный класс с нижним подчёркиванием (например, `s._active`).
- Не используйте строковые литералы с классами напрямую — только через объект `s`.