Питання на співбесіді з верстки з відповідями

Приклади запитань

Кілька запитань із кожного рівня з правильною відповіддю й поясненням.

Верстка · Junior

1. Навіщо на початку HTML-документа пишуть <!DOCTYPE html>?

   Правильна відповідь: Щоб увімкнути стандартний режим рендерингу, а не quirks mode

   DOCTYPE - не тег і не підключення ресурсів. Він повідомляє браузеру, що сторінку написано за сучасними стандартами, і вмикає standards mode. Без нього браузер переходить у quirks mode та емулює помилки старих браузерів (наприклад, іншу блокову модель). Кодування задає <meta charset="utf-8">, а не DOCTYPE.

2. Який набір складається лише із семантичних тегів HTML5?

   Правильна відповідь: <header>, <nav>, <main>, <article>, <footer>

   Семантичні теги описують зміст: шапка, навігація, основний контент, самостійна стаття, підвал. <div> і <span> - нейтральні контейнери без сенсу, а <b> та <i> - презентаційні (виділення без смислової ваги). Семантика допомагає скринрідерам, пошуковикам і читабельності коду.

3. Скільки видимих елементів <main> може бути на сторінці і для чого він потрібен?

   Правильна відповідь: Один - він містить основний унікальний вміст сторінки

   <main> позначає основний контент документа, унікальний для цієї сторінки (без шапки, меню та підвалу). Видимим має бути лише один (решта - з атрибутом hidden). Це орієнтир (landmark) для скринрідерів: за ним користувач одразу переходить до вмісту. <section> - тематичний розділ, а не заміна <main>.

4. Чим <div> відрізняється від <span> за замовчуванням?

   Правильна відповідь: <div> - блоковий елемент, <span> - рядковий

   У <div> за замовчуванням display: block: він розтягується на всю ширину батька й починається з нового рядка. У <span> - display: inline: він вбудовується в потік тексту і займає ширину за вмістом. Обидва елементи не мають семантики, це контейнери для групування та стилізації.

Верстка · Middle

1. Яка специфічність селектора nav#main .item:hover > a::before?

   Правильна відповідь: (1, 2, 3) - ID, клас + псевдоклас, два теги + псевдоелемент

   Рахуємо за розрядами: ID - #main (1); класи, атрибути та псевдокласи - .item і :hover (2); теги та псевдоелементи - nav, a, ::before (3). Комбінатори (>, пробіл) специфічності не додають. Псевдоклас важить як клас, а псевдоелемент - як тег.

2. Як перебити правило з !important зі сторонньої бібліотеки, не чіпаючи її код?

   Правильна відповідь: Написати своє правило теж з !important і селектором специфічнішим

   Звичайне правило ніколи не переб'є !important, хай яким специфічним воно буде. Серед кількох !important-декларацій знову працюють специфічність і порядок. Ще варіанти: inline-стиль з !important або каскадні шари - для !important порядок шарів інвертується. Найкращий шлях - уникати !important у власному коді.

3. На що розгортається скорочення flex: 1?

   Правильна відповідь: flex-grow: 1; flex-shrink: 1; flex-basis: 0%

   flex: 1 = 1 1 0%: базовий розмір нуль, тому весь простір ділиться між елементами строго пропорційно до flex-grow - колонки виходять рівними незалежно від контенту. flex: auto = 1 1 auto - ділиться лише вільне місце понад розмір контенту. flex: none = 0 0 auto.

4. Чим flex-basis відрізняється від width у flex-елемента в рядку (flex-direction: row)?

   Правильна відповідь: flex-basis - початковий розмір по головній осі; якщо він не auto, то важливіший за width

   flex-basis задає початковий розмір елемента вздовж головної осі, від якого рахуються grow і shrink. За flex-basis: auto береться width (або height у колонці). За flex-direction: column flex-basis працює по висоті, а не по ширині - у цьому ключова відмінність від width.

Верстка · Senior

1. Як каскадні шари @layer впливають на пріоритет стилів?

   Правильна відповідь: Порядок шарів важливіший за специфічність: перемагає пізніший шар

   Каскад спершу порівнює шари й лише потім специфічність усередині шару. Тому .btn із шару components переб'є #app .btn з ранішого шару base. Стилі поза шарами сильніші за будь-які шари. Для !important порядок інвертується: важливі декларації раннього шару сильніші. Tailwind v4 будує свої стилі на шарах theme, base, components, utilities.

2. Який порядок застосування у звичайних (не !important) стилів із шарів і поза шарами?

   Правильна відповідь: Стилі поза шарами сильніші за будь-який шар

   Стилі без шару неявно потрапляють в «останній» шар і виграють у всіх іменованих шарів. Це дає змогу обгорнути сторонній CSS у @layer vendor і легко перебивати його своїми стилями. За !important логіка зворотна: важливі стилі із шарів сильніші за важливі стилі без шару.

3. Що робить @scope (.card) to (.card__content) { img { ... } }?

   Правильна відповідь: Стилізує img усередині .card, але не всередині .card__content

   @scope задає корінь області й необов'язкову «нижню межу» (donut scope): стилі діють усередині .card, але не проникають у .card__content і його нащадків. Крім того, за однакової специфічності перемагає правило з ближчим коренем (scoping proximity). Shadow DOM @scope не створює.

4. Яку проблему розв'язує subgrid?

   Правильна відповідь: Дає вкладеній сітці треки батьківської, вирівнюючи частини різних карток

   З grid-template-rows: subgrid дочірня сітка успадковує лінії батьківської. Класичний приклад - ряд карток, де заголовки, тексти й кнопки мають стояти на одному рівні, навіть якщо в одній картці заголовок у два рядки. Без subgrid кожна картка вирівнюється незалежно.

Збірні тести з цією темою

Запитання з кількох тем одразу - як на співбесіді на конкретну вакансію.