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

title

title
Стиль кода

Стиль кода

Отступы

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

Кавычки

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

Пример:

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

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

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

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

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

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

Мемоизация

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

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

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

any, unknown

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

Классы в TSX

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

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

Пример:

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.