sync

OLD_parts/5-code-style.md

@@ -0,0 +1,74 @@
+---
+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`.