Собеседование по CSS и вёрстке: вопросы и голосовая практика

CSS обесценивают напрасно — на собеседовании по нему проваливаются чаще, чем по алгоритмам. Специфичность и каскад, стекинг-контексты, флекс и грид, современные возможности вроде container queries и :has — это спрашивают у всех уровней.

Устный ответ по вёрстке проверяет другое: умеете ли вы рассуждать о подходах — когда grid, когда flex, как организовать адаптивность и дизайн-токены. Отработайте это голосом.

Примеры вопросов — уровень Junior

• Что такое модель бокса и чем отличается box-sizing content-box от border-box?
• Чем отличаются единицы px, em и rem?
• Что такое специфичность селекторов и как она считается?
• Что делает свойство z-index и когда он не работает?
• Чем position relative отличается от position absolute?

Примеры вопросов — уровень Senior

• Как бы ты спроектировал систему дизайн-токенов, которая работает одинаково в CSS-переменных, Tailwind и на сервере?
• Как бы ты организовал стили в большом приложении на Next.js App Router, где часть компонентов серверные, а часть клиентские?
• Как бы ты выбрал между CSS Modules, Tailwind и CSS-in-JS для проекта с React Server Components, и почему?
• Как бы ты построил адаптивный компонент карточки, который подстраивается под размер своего контейнера, а не окна браузера?
• Когда бы ты использовал container queries вместо media queries, и какие у этого подводные камни?

Проверьте себя вживую

Список — это хорошо, но на собеседовании отвечать придётся голосом и под давлением. Запустите тренажёр: AI задаст 10 вопросов, выслушает ваши ответы и подведёт итоги.