Это самая полезная страница этапа. Всё остальное можно подсмотреть у готовых сайтов, а вот умение объяснить задачу словами заменяет собой месяцы изучения CSS.
Четыре части хорошего запроса
Порядок не строгий, но пропущенная часть почти всегда означает переделку.
| Часть | Что писать |
|---|---|
| Задача | Что нужно получить, одним предложением: «свёрстай блок с тремя карточками» |
| Ограничения | Чистый CSS, БЭМ, mobile-first, свои переменные, с какой ширины две колонки |
| Формат ответа | «Один блок HTML и один блок CSS, без объяснений» — иначе придёт статья |
| Пример | Кусок своего кода: имена классов, переменные, отступы. Ответ встанет рядом |
Один и тот же запрос, до и после
Сравните. Первый вариант я написал в самом начале и потратил на переделки полвечера.
Сделай красивый блок с карточками для моего сайта, чтобы хорошо смотрелся на телефоне.
В ответ пришёл блок на Tailwind с градиентами, тенями и подъёмом карточек при наведении — то есть ровно то, что на сайте запрещено. Переписанный запрос выглядит так.
Свёрстай ряд из трёх карточек-ссылок. В карточке: заголовок, два предложения описания, внизу строка с пометкой. Вся площадь карточки должна быть ссылкой.
Ограничения: чистый CSS без фреймворков, БЭМ, mobile-first. На телефоне карточки в столбик, с 768 пикселей — в ряд. Цвета и отступы бери из переменных: --c-border, --c-bg-tint, --r-md, --space-5.
При наведении меняй только цвет рамки и подложку — без подъёма карточки и без цветной тени. Фокус с клавиатуры должен быть виден.
Формат ответа: один блок HTML, один блок CSS, без пояснений. Вот как выглядит моя разметка сейчас, держись этого стиля:
<article class="card card--link"><h3 class="card__title">…</h3></article>
Приёмы, которые экономят больше всего
- Запрещайте прямо. «Не добавляй стрелки в кнопки», «не используй Tailwind», «без надзаголовков капсом». Нейросеть тянется к среднему по интернету решению, и отказ должен быть высказан.
- Давайте свой код как образец. Двадцать строк своей разметки в запросе работают лучше любых описаний стиля.
- Просите по одному блоку. Запрос на целую страницу приносит тысячу строк, в которых непонятно, что проверять. Блок за блоком — медленнее на вид, быстрее по факту.
- Задавайте формат ответа. Без этого половина ответа уйдёт в объяснения, которые вам сейчас не нужны.
Ответ нужно проверять, а не вставлять
Код приходит работающий, но не всегда правильный: лишний вложенный блок, класс с другим именем, забытое ограничение ширины. Вставили — открыли в браузере — сузили окно до телефона. Это тридцать секунд, которые окупаются каждый раз.
Как выглядит хороший ответ
На переписанный запрос приходит примерно такое — и вот это уже можно вставлять в проект.
Разметка. Три элемента
article с классами card
card--link, внутри каждого заголовок третьего
уровня, абзац описания и строка пометки. Ссылка
растянута на всю площадь через
position: absolute у невидимого слоя —
так щёлкается вся карточка, а не только заголовок.
Стили. Сетка на grid:
одна колонка по умолчанию, три — начиная
с 768 пикселей. Рамка и подложка берутся
из переменных --c-border
и --c-bg-tint, при наведении меняются
только они. Для фокуса добавлен
:focus-visible с обводкой в два пикселя.
Что я изменил после проверки. В ответе описание карточки не было ограничено по ширине — на большом мониторе строка растянулась почти на всю карточку. Добавил предел в 68 знаков сам, это одна строка CSS.
Если ответ не подошёл
Не начинайте разговор заново. Скажите, что именно не так, и попросите исправить то же самое: «карточки при наведении поднимаются — убери подъём, оставь только рамку». Правка точнее, чем новый запрос, и код не разъезжается с тем, что уже вставлено на страницу.
Что должно получиться
- Ваш запрос содержит все четыре части: задачу, ограничения, формат и пример
- В запросе названы имена классов и переменные вашего проекта
- Есть список того, чего делать не нужно
- Каждый ответ вы открываете в браузере и сужаете окно, прежде чем идти дальше