frontend-style-guide/OLD_parts/11-css.md

---
title: CSS
---

# CSS

## Правила оформления и стилизации CSS-кода

- **Препроцессоры**  
  Используй PostCSS и модули для стилизации.

- **Архитектура написания стилей**  
  Используй подход **Mobile First**  
  Используй CSS переменные для стилизации.  
  Используй Custom Media Queries для адаптивных стилей.  
  Используй BEM для именования классов.  
  Между каждым CSS-правилом (селектором) должен быть один пустой сброс строки, пример:
  ```css
  .todo-list {
    max-width: 600px;
    padding: var(--space-3);

    @media (--md) {
      max-width: 800px;
    }
  }

  .todo-list__text {
    font-size: 18px;

    @media (--md) {
      font-size: 22px;
    }
  }
  ```
  Запрещено писать правила подряд без пустой строки:
  ```css
  /* Так делать нельзя! */
  .todo-list { ... }
  .todo-list__text { ... }
  ```

- **Методология именования классов**  
  Использовать методологию **BEM** для именования классов.
    - Блок: kebab-case, пример `.user-bar { }`
    - Елемент: kebab-case, соеденный с блоком двойным нижним подчеркиванием, пример `.user-bar__slide { }`
    - Модификатор: kebab-case, отдельный самостоятельный класс, **не соединяется** с блоком/елементом, имя модификатора всегда начинается с нижнего подчеркивания, пример: `._red { }`

- **Единицы измерения**  
  Используй `px` как основная единица измирения, так-же допускается использовать остальные единицы измерения если того требует реализуемый дизайн.

- **Импорт стилей**  
  Стили компонента должны импортироваться только внутри соответствующего компонента.  
  Запрещено импортировать стили одного компонента в другой.
  Запрещено импортировать `css переменные` в файлы стилей, они доступны глобально.
  Запрещено импортировать `custom media` в файлы стилей, они доступны глобально.

- **Переменные**  
  Все значения переменных нужно писать в `/shared/styles` или в Mantine ThemeProvider. 
  Все что не является цветами, брекпоинтами, отступами, скруглением допускаются использоваться в компонентах.
  Обязательное создавай CSS перменные для:
   - "Цветов", пример: `--color-danger: red;`.  
   - "Брекпоинты", описываем в (Сustom media) пример: `@custom-media --md (min-width: 62em);`.
   - "Отспупы (--space)", , пример: `--space-1: 4px;`, `--space-2: 8px;`, `--space-3: 12px;` итд.. 
   - "Скругление углов (--radius)", пример: `--radius-1: 4px;`,`--radius-2: 8px;`,`--radius-3: 12px;` итд..  

- **Вложенность селекторов**
  Запрещено использовать вложенность селекторов.
  Разрешено использовать вложенность только для:
    - Псевдо-классов `:hover`, `:active` итд..
    - Псевдо-елементов `::before`, `::after`
    - Медиа запросов `@media`
    - Классы **модификаторы** по методологии BEM
  Каждый вложенный селектор отделяется 1 пустой строкой.

- **Медиа запросы**  
  Строго запрещено использовать `@media` без вложения в селектор.  
  Строго запрещено использовать в теле `@media` любые селекторы.  
  Разрешено использовать только Custom Media Queries (например, `@media (--md) {}`).  
  Запрещено использовать любые произвольные значения breakpoints (например, max-width: 768px).  
  **Пример как правильно писать @media**
  ```css
  .todo-list {
    max-width: 600px;
    padding: 24px;

    @media (--md) {
      max-width: 800px;
    }
  }

  .todo-list__text {
    font-size: 18px;

    @media (--md) {
      font-size: 22px;
    }
  }
  
  ```
  **Пример как неправильно писать @media**
  ```css
  // Медиа запрос не вложен в селектор
  @media (--md) {
    .todo-list {
      max-width: 600px;
      padding: 24px;
    }
    .todo-list__text {
      font-size: 18px;
    }
  }
  // Используется стандартный `min-width: 992px` вмето Custom Media Queries
  @media (min-width: 992px) {
    // Внутри @media запроса используются селекторы
    .todo-list {
      max-width: 600px;
      padding: 24px;
    }
    .todo-list__text {
      font-size: 18px;
    }
  }
  ```

- **Глобальные стили и сбросы**  
  Все глобальные стили (например, сбросы) должны располагаться в отдельном файле, например, `src/app/styles/global.css`.  

- **Использование Mantine и PostCSS**  
  Для стандартных визуальных компонентов (кнопки, инпуты, layout, grid, notifications и т.д.) использовать только Mantine и его ThemeProvider.
  Запрещено использовать в Mantine компонентах его props/styling, вмето этого нужно добавлять кастомные стили PostCSS.
  Кастомные стили допускаются только в случае, если требуемый дизайн невозможно реализовать средствами Mantine.  
  При написании кастомных стилей стараться использовать переменные и токены Mantine, если это возможно.

- **Порядок CSS-свойств**  
  В стилях рекомендуется придерживаться логического порядка свойств:  
  1. Позиционирование (position, top, left, z-index и т.д.)  
  2. Блочная модель (display, width, height, margin, padding и т.д.)  
  3. Оформление (background, border, box-shadow и т.д.)  
  4. Текст (font, color, text-align и т.д.)  
  5. Прочее (transition, animation и т.д.)

- **Комментарии**  
  В стилях запрещено использовать комментарии.

- **Дублирования**  
  Не дублировать стили между компонентами. Общие стили выносить в shared/styles или использовать переменные.

- **Примеры кода стилей**
  Пример как хорошо:
  ```css
  /* Блок BEM */
  .user-bar {
    display: none;
    color: black;

    /* Медиа запрос custom media и отделяется 1 пустой строкой */
    @media (--md) {
      display: flex;
    }
  }

  /* Елемент BEM отделяется 1 пустой строкой*/
  .user-bar__button-next {
    background-color: #f0f0f0;

    /* Псевдо-класс отделяется 1 пустой строкой*/
    &:hover {
      background-color: #e0e0e0;
    }

    /* Модификатор BEM отделяется 1 пустой строкой*/
    &._blue {
      background-color: #2b2bbe;
    }

    /* Модификатор BEM отделяется 1 пустой строкой*/
    &._green {
      background-color: #29c53d;
    }
  }
  ```
  Пример как плохо писать:
  ```css
  .user-bar {
    display: none;
    color: black;
    &__button {
      &_next {
        background-color: #f0f0f0;
        &:hover {
          background-color: #e0e0e0;
        }
        &._blue {
          background-color: #2b2bbe;
        }
        &._green {
          background-color: #29c53d;
        }
      }
    } 
  }
  @media (min-width: 992px) {
    .user-bar {
      display: flex;
    }
  }
  ```

**Чек лист для проверки стилизации.**
- [ ] Используется PostCSS и CSS-модули для стилизации.
- [ ] Применён подход Mobile First.
- [ ] Именование классов строго по BEM:
  - [ ] Модификатор — отдельный класс, начинается с нижнего подчёркивания (например, `._red`, `._active`)
- [ ] Все CSS-переменные (цвета, брейкпоинты, отступы, скругления) определены только в `/shared/styles` или через Mantine ThemeProvider.
- [ ] Для медиа-запросов используются только custom media переменные из `/shared/styles/media.css`.
- [ ] Соблюдается правила вложености селекторов.
- [ ] Соблюдается правила отступов селекторов.
- [ ] Глобальные стили (reset) вынесены в отдельный файл, остальные стили — модульные.
- [ ] Для стандартных UI-элементов используются только компоненты Mantine, кастомные стили — только при необходимости.
- [ ] В Mantine-компонентах не используются props/styling для стилизации, только PostCSS.
- [ ] Кастомные стили используют переменные и токены Mantine, если это возможно.
- [ ] В стилях нет комментариев.
- [ ] Стили компонента импортируются только внутри соответствующего компонента.
- [ ] Нет импорта стилей одного компонента в другой.
- [ ] Нет импорта файлов переменных и custom media — они доступны глобально.
- [ ] Нет дублирования стилей между компонентами, общие стили вынесены в shared/styles или используются переменные.