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

Что такое CSS Modules и чем они отличаются от CSS-in-JS?

JuniorВёрстка и CSS
Ещё спрашивают так:
  • Как изолировать стили компонента?
Коротко

CSS Modules — обычный CSS-файл, классы которого сборщик превращает в уникальные имена (.title → Card_title__x7a2) и отдаёт объектом: styles.title. Стили изолированы без соглашений об именах, остаются статическим CSS — быстро и кэшируется. CSS-in-JS (styled-components, Emotion) пишет стили в JS с доступом к props — гибко, но добавляет работу в рантайме и сложнее с серверными компонентами; современные варианты (vanilla-extract, Linaria) собирают CSS на этапе сборки.

  • CSS-переменные — для тем и динамических значений без CSS-in-JS
  • Глобальные стили (сброс, шрифты) — отдельный файл
  • Выбор — по команде и фреймворку, главное — единообразие

Подробно

import styles from './Card.module.css';
<h3 className={styles.title}>…</h3>

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

  • Уникальные имена классов при сборке.
  • Изоляция без методологии.
  • Плюсы и минусы CSS-in-JS.

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

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

Показать варианты и ответ
  • ✗CSS Modules выполняют стили в JavaScript во время работы приложения, как styled-components и emotion
  • ✗CSS Modules делают классы глобальными, а CSS-in-JS изолирует их
  • ✗CSS-in-JS не имеет недостатков по сравнению с CSS Modules
  • ✓Модули хешируют имена классов при сборке и остаются статическим CSS; CSS-in-JS пишет стили в JS

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

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

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

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

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