Урок 11. Частые ошибки
⚡ Кратко
Desktop-first по привычке, брейкпоинты «под конкретный телефон», приставка на каждый класс и забытая проверка на 320px.
Ошибка 1. Приставка вместо базового класса
Как ломается: на мобильном пропадает оформление, потому что базового значения нет вовсе.
❌ Только для десктопа
<div class="md:grid md:grid-cols-3 md:gap-6">…</div>✅ База плюс улучшение
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6">…</div>Ошибка 2. Приставка на каждый класс
❌ Дублирование
<div class="p-4 sm:p-4 md:p-4 lg:p-6">…</div>✅ Только там, где значение меняется
<div class="p-4 lg:p-6">…</div>Почему: правило продолжает действовать на всех бо́льших экранах. Повторять его не нужно — это только удлиняет строку.
Ошибка 3. Брейкпоинты «под устройства»
Как ломается: вёрстка подогнана под «iPhone 14» и разваливается на любом другом размере.
Как правильно: добавляйте брейкпоинт там, где ломается макет, а не там, где заканчивается модель телефона. Сужайте окно плавно и смотрите, где становится тесно, — вот там и нужна приставка.
Ошибка 4. Не проверили 320px
Как ломается: горизонтальная прокрутка на маленьких экранах — самый заметный дефект вёрстки.
Чаще всего виноваты: фиксированные ширины (w-96 вместо
max-w-96), длинные слова без break-words, широкие
таблицы без overflow-x-auto и отрицательные отступы.
Ошибка 5. Медиазапрос там, где нужен контейнер
Компонент, свёрстанный на md:, ломается, когда его кладут
в сайдбар: окно широкое, а места мало. Если компонент используется больше
чем в одном месте, его внутренняя раскладка — задача container queries.
Ошибка 6. Скрывать контент вместо переупорядочивания
hidden md:block — быстрый способ «починить» мобильный вид,
но он лишает пользователя информации. Сначала подумайте, нельзя ли изменить
порядок или форму подачи: свернуть в аккордеон, показать в две строки,
перенести в меню.