Питання на співбесіді з CSS найчастіше перевіряють не заучені властивості, а розуміння того, як браузер будує сторінку, вирішує конфлікти стилів і адаптує макет під різні екрани. Саме тому корисно готуватися не списком термінів, а темами, які регулярно з’являються в технічних інтерв’ю.
Базові питання про каскад, специфічність і спадкування
Базові питання на співбесіді з CSS зазвичай стосуються того, як працюють каскад, специфічність і спадкування, бо саме ці механізми визначають фінальний вигляд елемента. Якщо ви впевнено пояснюєте різницю між ними, уже закриваєте значну частину типових запитань.
- Каскад визначає, який стиль переможе, коли кілька правил впливають на один елемент.
- Специфічність показує пріоритет селектора: від простих тегів до класів, атрибутів і вкладених комбінацій.
- Спадкування передає частину властивостей від батьківського елемента до дочірнього.
Практична перевірка проста: якщо два правила дають різний результат, відкрийте DevTools і подивіться, яке саме правило перекреслене і чому. Якщо ви не можете пояснити це без інструментів, варто повторити пріоритети селекторів і порядок підключення стилів.
Блочна модель, display і позиціонування
Блочна модель, display і позиціонування часто входять до основних питань на співбесіді з CSS, бо вони показують, чи розуміє кандидат структуру елемента на сторінці. Тут важливо не просто назвати властивості, а пояснити, як вони впливають на розміри, відступи та потік документа.
Що зазвичай питають
Ключові запитання стосуються різниці між content-box і border-box, поведінки block, inline та inline-block, а також того, як працюють relative, absolute, fixed і sticky.
- box-sizing змінює спосіб обчислення ширини та висоти.
- display визначає, як елемент поводиться в потоці документа.
- position впливає на прив’язку елемента до сторінки або контейнера.
Перевірити розуміння легко: змініть box-sizing у невеликому макеті й подивіться, чи зламалися розміри блоків. Якщо елемент поводиться не так, як очікувалося, спочатку перевірте контекст позиціонування та наявність заданих координат.
Flexbox, Grid і адаптивна верстка
Flexbox, Grid і адаптивна верстка майже завжди потрапляють у питання на співбесіді з CSS, бо вони показують, чи вміє кандидат будувати сучасні макети без зайвих костилів. Роботодавці часто хочуть почути не лише синтаксис, а й розуміння, коли вибрати один підхід замість іншого.
Що важливо пояснити
Flexbox зручний для вирівнювання елементів в одному вимірі, а Grid краще підходить для двовимірних сіток і складних сторінок. Адаптивна верстка зазвичай спирається на media queries, гнучкі одиниці виміру та продуману структуру контейнерів.
- Flexbox — для рядків, колонок і розподілу вільного простору.
- Grid — для сторінок, карток і макетів із кількома зонами.
- Media queries — для зміни стилів під конкретні ширини екрана.
Хороша перевірка — зменшити ширину вікна браузера й подивитися, чи не ламається структура, чи не виникає горизонтальний скрол і чи зберігається читабельність. Якщо макет розсипається, значить, варто переглянути фіксовані ширини та логіку контейнерів.
Псевдокласи, псевдоелементи та типові помилки
Псевдокласи, псевдоелементи та типові помилки часто з’являються в питаннях на співбесіді з CSS, бо вони показують уважність до деталей і вміння писати чисті стилі. Тут часто перевіряють різницю між станом елемента і віртуальним фрагментом контенту.
- :hover, :focus, :active описують стани елемента.
- ::before і ::after створюють декоративні вставки без додаткової розмітки.
- :nth-child() допомагає вибирати елементи за їхнім порядком.
Найчастіша помилка — плутати псевдоклас із псевдоелементом або намагатися вирішити декоративне завдання через зайві HTML-елементи. Якщо стилі поводяться дивно, перевірте, чи не конфліктують стани, чи правильно заданий порядок селекторів і чи не перекриває один елемент інший.
Як підготуватися до співбесіди без зубріння
Підготовка до питань на співбесіді з CSS працює краще, коли ви тренуєте пояснення на простих прикладах, а не вчите теорію окремо від практики. Найкорисніший підхід — взяти невеликий макет і пройтися по ньому від каскаду до адаптивності.
- Поясніть, чому один стиль переміг інший.
- Покажіть різницю між flex і grid на одному й тому самому блоці.
- Перевірте, як макет поводиться на мобільній ширині.
- Окремо повторіть box model, позиціонування і селектори.
Якщо ви можете коротко і логічно описати, що відбувається з елементом у браузері, на співбесіді це звучить переконливіше за набір термінів без контексту. Саме так і перевіряють реальне розуміння CSS.
