Выбор ответа Junior Архитектура CSS обновлено
Как CSS Modules изолируют стили
Вопрос
Как CSS Modules предотвращают конфликт имён классов между компонентами?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Сборщик заменяет имена классов на уникальные с хешем и отдаёт их в JS. При сборке .root из Button.module.css превращается в что-то вроде .Buttonroota1b2c, а импорт s.root возвращает это имя.
Варианты ответа
- Через Shadow DOM: каждый компонент рендерится в своём теневом дереве
- Сборщик заменяет имена классов на уникальные с хешем и отдаёт их в JSправильный ответ
- Добавляют ко всем селекторам компонента
!important, и чужие стили не перебьют - Генерируют стили в рантайме при каждом рендере и вставляют их в
<style>
Разбор
При сборке .root из Button.module.css превращается в что-то вроде .Button_root__a1b2c, а импорт s.root возвращает это имя. Shadow DOM относится к веб-компонентам, CSS Modules его не используют. !important не изолирует, а только ломает каскад. Генерация в рантайме - это рантайм CSS-in-JS, CSS Modules работают на этапе сборки.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.