Вопрос с собеседования · Frontend

Как стилизовать компоненты React — CSS Modules, Tailwind, clsx?

JuniorВёрстка и CSS
Ещё спрашивают так:
  • Как добавить класс по условию в React?
Коротко

CSS Modules (Button.module.css) делают имена классов локальными для файла: styles.primary превращается в уникальное имя, конфликтов нет. Tailwind — служебные классы прямо в разметке (px-4 py-2 rounded), без своих CSS-файлов. Условные классы удобно собирать clsx: clsx("btn", active && "btn-active"). Инлайн-стиль style={{...}} — для динамических значений (ширина в процентах), но не для всего: нет медиазапросов и псевдоклассов.

  • CSS-in-JS в рантайме (styled-components) уходит из моды из-за цены и серверных компонентов
  • Дизайн-токены (цвета, отступы) — в CSS-переменных
  • Длинные строки Tailwind выносят в компоненты, а не в @apply везде

А ещё Глобальный CSS — только для сброса стилей и переменных

Подробно

import styles from "./Button.module.css";
import clsx from "clsx";
export function Button({ primary, ...p }) {
  return <button className={clsx(styles.btn, primary && styles.primary)} {...p} />;
}

Что хотят услышать

  • CSS Modules и локальные классы.
  • Tailwind.
  • clsx для условий, инлайн-стили для динамики.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗CSS Modules делают классы глобальными для всего приложения
  • ✗Инлайн-стили поддерживают медиазапросы и :hover, поэтому заменяют CSS-файлы
  • ✓CSS Modules — локальные имена классов, Tailwind — утилиты в разметке, clsx — условные классы
  • ✗В React нельзя использовать обычные CSS-классы

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования