Структура и организация

Общие принципы

1. Весь код в любом проекте должен выглядеть так, будто его создал один человек, вне зависимости от того, сколько людей на самом деле принимали участие.
2. Хорошо откомментированный код очень важен. Потратьте время на то, чтобы описать компоненты, особенности их работы, ограничения и то, как они были созданы. Не заставляйте других членов команды гадать над назначением неочевидного кода.
3. Стиль комментариев должен быть простым и однородным для всего проекта:
   • Помещайте комментарий на строке перед комментируемым фрагментом кода.
   • Избегайте добавления комментариев в конец строки.
   • Свободно используйте комментарии для оформления разделов внутри CSS-файла.

Файловая структура

Разделяйте стили на модули/компоненты и храните их в одной папке с соответствующим компонентом. Это обеспечит более наглядную и понятную структуру проекта.

Рекомендуемая структура

/components
  /header
    header.tsx
    header.module.scss
  /button
    button.tsx
    button.module.scss

Не рекомендуемая структура

/components
  /header
    index.tsx
    index.module.scss
  /button
    index.tsx
    index.module.scss

Barrel файлы

Не используйте barrel файлы (index.ts) для экспорта компонентов. Это усложняет поиск и понимание структуры проекта, так же это может привести к плохой оптимизации.

Рекомендуемая структура

/components
  /header
    header.tsx
    header.module.scss

Не рекомендуемая структура

/components
   /header
       header.tsx
       header.module.scss
       index.ts ( export * / header from './header.tsx' )

Нейминг файлов и папок

Используйте тире как разделители (kebab-case)

1. Никогда не используйте пробелы / нижние подчеркивания в именах файлов.
2. Используйте нижний регистр для всех имен файлов и папок.

Рекомендуемый нейминг

/components
   /login-dialog
        login-dialog.tsx
        login-dialog.module.scss

Не рекомендуемый нейминг

/components
   /loginDialog
       loginDialog.tsx
       loginDialog.module.scss

/components
   /logindialog
       logindialog.tsx
       logindialog.module.scss

/components
   /login_dialog
       login_dialog.tsx
       login_dialog.module.scss

Компоненты

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

Форматирование

Разделяйте блоки стилей новой строки для лучшей структурированности.

Хорошо

.block {
  display: flex;
  margin: 10px;

  &Element {
    flex: 1;

    &Modifier {
      flex: 0;
    }
  }
}

Плохо

.block {
  display: flex;
  margin: 10px;
  &Element {
    flex: 1;
    &Modifier {
      flex: 0;
    }
  }
}

Наименование переменных

Вы не компилятор и не компрессор кода, поэтому ведите себя соответственно.

Используйте понятные и осмысленные имена для классов в HTML. Выберите ясный и последовательный шаблон именования, который будет удобен как для HTML, так и для CSS.

Хорошо

.is-scrollable {
  overflow: auto;
}

.column-body {
  background: #000;
}

Плохо

.s-scr {
  overflow: auto;
}

.cb {
  background: #000;
}