Какой твой основной флоу при вёрстке страницы?

Хорошая вёрстка — это последовательный процесс, а не хаотичное добавление стилей.

Типичный флоу вёрстки

1. Анализ макета

Перед кодом важно понять:

1. Какие основные зоны (header, sidebar, content)

2. Где фиксированные размеры

3. Где резиновая часть

2. Построение layout

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
}

1. Сначала общий каркас

2. Без деталей и цветов

3. Проверка на resize

3. Компоненты

1. Разбиваю layout на независимые блоки

2. Использую Flexbox внутри компонентов

3. Избегаю жёстких зависимостей от родителя

4. Адаптивность

1. Mobile-first media queries

2. Проверка крайних состояний

3. Контент важнее точного пикселя

5. Детали и состояния

1. Hover / focus / disabled

2. Empty / loading состояния

3. Переполнение текста

Вывод

Чёткий флоу “layout → компоненты → адаптив → состояния” позволяет делать устойчивую и легко поддерживаемую вёрстку.