Как хорошо знаешь CSS

Вопрос

Как хорошо знаешь CSS

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет оценить глубину понимания CSS, умение применять его на практике, знание современных инструментов и подходов, а также способность решать типичные проблемы верстки.

Ключевые тезисы

• Глубокое понимание базовых концепций: селекторы, каскадность, наследование, специфичность.
• Опыт работы с Flexbox и Grid для создания адаптивных и сложных макетов.
• Знание современных подходов, таких как CSS-переменные (Custom Properties) и методологии (BEM, SMACSS).
• Умение работать с анимациями и переходами (transitions, keyframes) для улучшения UX.
• Понимание кросс-браузерных особенностей и способов их решения (autoprefixer, полифиллы).
• Опыт использования препроцессоров (Sass/Less) или постпроцессоров (PostCSS).
• Знание основ доступности (a11y) и семантической верстки.

Подробный ответ

CSS (Cascading Style Sheets) — это язык стилей, используемый для описания внешнего вида документа, написанного на HTML. Он позволяет контролировать макет, цвета, шрифты и другие визуальные аспекты веб-страницы. Основные концепции включают селекторы (для выбора элементов), каскадность (приоритеты стилей), наследование (передача свойств от родителя к потомку) и специфичность (вес селекторов). Например, специфичность определяется по правилу: inline-стили > ID > классы/атрибуты/псевдоклассы > элементы/псевдоэлементы.

Flexbox и Grid — современные системы макетов. Flexbox идеален для одномерных макетов (ряды или колонки), а Grid — для двумерных (сетки). Например, Flexbox подходит для навигационного меню, а Grid — для сложных карточек товаров.

CSS-переменные (Custom Properties) позволяют хранить значения для многократного использования, что упрощает поддержку кода. Например, --primary-color: #3498db; можно использовать в любом месте стилей.

Анимации и переходы (transitions, keyframes) улучшают UX, создавая плавные эффекты. Например, transition: all 0.3s ease; плавно изменит свойства элемента при наведении.

Практические примеры

Пример 1

Пример специфичности:

#header .menu-item { color: red; } /* Вес: 0,1,1,0 */
.menu-item { color: blue; } /* Вес: 0,0,1,0 */
/* Применится красный цвет */

Пример 2

Пример Grid:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Пример 3

Пример CSS-переменных:

:root {
  --primary-color: #3498db;
}
.button {
  background-color: var(--primary-color);
}

Частые ошибки

• Использование !important без необходимости, что усложняет переопределение стилей.
• Непонимание различий между Flexbox и Grid, приводящее к неоптимальным макетам.
• Игнорирование кросс-браузерной совместимости, особенно для старых версий браузеров.

Связанные темы

• Методологии CSS (BEM, SMACSS) для организации кода.
• Доступность (a11y) и семантическая вёрстка.
• Препроцессоры (Sass/Less) и постпроцессоры (PostCSS).

Follow-up вопросы

Как работает специфичность селекторов в CSS? Приведи пример.

Уровень: basic

Специфичность определяет, какой стиль будет применён к элементу при конфликте правил. Она рассчитывается по весу: инлайн-стили (1000), ID (100), классы/псевдоклассы (10), теги/псевдоэлементы (1). Например, #header .nav (110) переопределит div.nav (11).

В чём разница между Flexbox и Grid? Когда стоит использовать каждый?

Уровень: intermediate

Flexbox — для одномерных макетов (ряд или колонка), например, навигация или центрирование элементов. Grid — для двумерных сеток (строки и колонки), например, сложные адаптивные макеты. Flexbox лучше для динамического контента, Grid — для жёсткой структуры.

Как оптимизировать CSS для повышения производительности?

Уровень: advanced

Использовать минификацию и сжатие (например, через PostCSS), избегать избыточных селекторов, применять will-change для сложных анимаций, разделять критический CSS, использовать contain для изоляции областей. Также полезно удалять неиспользуемые стили (PurgeCSS).

Как реализовать адаптивность без медиазапросов?

Уровень: intermediate

Можно использовать CSS-функции min(), max(), clamp() для динамических размеров, относительные единицы (vw, vh), Flexbox/Grid с auto-fit/auto-fill. Например, grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) создаст адаптивную сетку.

Как работают CSS-переменные (Custom Properties) и в чём их преимущество?

Уровень: basic

CSS-переменные (например, --primary-color: #333) позволяют хранить значения для повторного использования и динамически изменять их через JavaScript (element.style.setProperty). Преимущества: упрощение темизации, поддержка каскадирования, уменьшение дублирования кода.