Подготовка к интервью
227 вопросов по CSS с технических собеседований
Что проверяют на интервью
На странице собраны вопросы по CSS — от проверки базовых принципов до практического применения и архитектурных решений. В подборке чаще встречаются темы: frontend, css, browser.
Каталог
Стандартный CSS не выбирает ссылку по текстовому содержимому. Для атрибутов подходит CSS-селектор, для видимого названия — текстовый локатор или XPath.
Читать ответЛокаторы могут опираться на id, атрибуты, CSS, XPath, текст, роль или метку поля — в зависимости от инструмента. CSS компактен для структуры и атрибутов, XPath выразителен для путей и связей в дереве.
Читать ответCSS-селекторы выбирают элементы по правилам CSS, а XPath описывает путь и условия по дереву документа. XPath удобен для ряда текстовых и родственных связей; выбор зависит от устойчивости локатора.
Читать ответПредпочтите get_by_label для полей и get_by_role для кнопки, а технические селекторы используйте для явно заданных контейнеров. Действие login должно дождаться результата.
Читать ответXPath умеет выражать навигацию по узлам и текстовые условия, CSS обычно ориентирован на структуру и атрибуты элементов. Практически важнее устойчивость локатора и поддержка конкретного движка.
Читать ответНе привязывайте тест к сгенерированному CSS-классу: используйте доступную роль и имя, label, устойчивый атрибут или согласованный data-testid.
Читать ответПо показанным inline-правилам цвет будет salmon: .child:first-child имеет специфичность (0,2,0), выше остальных подходящих селекторов. Но неизвестный style.css может изменить итог.
Читать ответПодходит .menu a:last-child:not([target="_blank"]). В приведённой разметке совпадений нет: единственная последняя ссылка имеет запрещённый target.
Читать ответВ коде две опечатки: 100wh нужно заменить на 100vh, а ls — на 1s. После исправления элемент будет за секунду перемещаться снизу к исходной позиции.
Читать ответvar(--target-y) допустим внутри keyframes, translate3d записан корректно. При высоте окна до 500px включительно начальное смещение равно 400px, иначе 100vh.
Читать ответРасскажите о реальном использовании utility-классов, настройке design tokens и сборке повторяемых компонентов. Tailwind и Bootstrap не полностью одинаковы по подходу.
Читать ответCSS Modules настраиваются интеграцией сборщика или framework; часто достаточно имени *.module.css. Для явного глобального селектора используется :global.
Читать ответ