Как у вас была устроена разметка?

В проекте разметку строили на компонентной архитектуре — React + CSS Modules + SCSS. Основной принцип: каждый компонент — самодостаточный модуль со своей стилизацией и разметкой. Для нейминга классов использовали модифицированный БЭМ, где блоком был сам компонент, элементом — дочерняя нода, а модификаторы — через классы, которые добавляются динамически. Это исключало конфликты селекторов и делало систему предсказуемой даже в большом монолитном проекте (~300 компонентов).

• Организация файлов: для каждого компонента — папка: Button/ с файлами Button.tsx, Button.module.scss, Button.test.tsx, index.ts. Стили лежат рядом, а не в глобальной куче.
• Методология: классы вида Button (корень), Button__icon (элемент), Button--primary (модификатор). SCSS помогал с вложенностью и управлением состояниями через &--disabled.
• Переиспользование через пропсы: один компонент Button мог принимать варианты variant='primary' | 'secondary', size='sm' | 'md' | 'lg'. Внутри через пропсы выбирался набор классов — без лишних условных рендеров.
• Система дизайн-токенов: все отступы, цвета, шрифты вынесены в SCSS-переменные и импортируются в каждый модуль. Это давало единообразие и быструю смену темы.
• Адаптивность: использовали mobile-first подход; медиа-запросы писали внутри компонента через SCSS-миксины (например, @include respond-to(sm)).

Пример типичного файла стилей:

.Button {
  display: inline-flex;
  align-items: center;
  padding: token(spacing-md);

  &--primary {
    background: token(color-primary);
  }

  &__icon {
    margin-right: token(spacing-xs);
  }

  @include respond-to(md) {
    padding: token(spacing-lg);
  }
}

Такая архитектура разметки позволила: снизить конфликты при параллельной работе (каждый компонент — своя область), легко тестировать стили (модули изолированы), быстро внедрять новые компоненты из дизайн-системы.