React Frontend Developer

Question 1

Что такое HTML Imports и почему они были отклонены стандартом? Какие современные альтернативы существуют для организации модулей?

Accepted Answer

HTML Imports — это экспериментальная технология, которая позволяла загружать и включать HTML-файлы в другие документы с помощью тега <link>. Она была отклонена из-за слабой поддержки и наличия альтернативных стандартов, таких как JavaScript модули и Web Components. Современные альтернативы включают ES-модули (import/export) и технологии, основанные на шаблонах и компонентах, такие как React и Web Components.

Question 2

Для чего используется !important?

Accepted Answer

!important — это специальное правило в CSS, которое позволяет переопределить любые другие стили, даже если они имеют более высокую специфичность. При добавлении !important к свойству, это свойство становится приоритетным, и любые другие правила для этого элемента игнорируются. Однако использование !important не рекомендуется, так как это может усложнить поддержку кода и привести к путанице в определении стилей.

Question 3

Зачем использовать import type в TypeScript и чем он отличается от обычного import?

Accepted Answer

import type используется для импорта только типов, а не значений. В отличие от обычного import, он не генерирует код в JavaScript на этапе компиляции, что уменьшает размер бандла и улучшает производительность. Это особенно полезно при использовании с инструментами сборки, такими как Webpack, для оптимизации tree shaking.

Question 4

Как можно переопределить CSS-свойство, помеченное флагом !important?

Accepted Answer

Флаг !important повышает приоритет CSS-свойства, но его можно переопределить другим свойством с !important, имеющим более высокую специфичность селектора. Также можно использовать inline-стили с !important или добавить правило с тем же селектором позже в коде. Однако злоупотребление !important усложняет поддержку стилей.

Question 5

Почему использование !important считается плохой практикой?

Accepted Answer

Использование !important нарушает естественный каскад CSS и делает специфичность селекторов бесполезной. Это затрудняет отладку и поддержку кода, так как переопределить такой стиль можно только другим !important. Вместо этого следует использовать правильные селекторы и порядок объявлений.

Question 6

Какие есть способы избавиться от !important в проекте, если нужно его убрать?

Accepted Answer

Чтобы избавиться от !important, нужно повысить специфичность селектора, перестроить порядок подключения стилей или использовать более вложенные селекторы. Также можно применить методологию BEM для изоляции стилей или CSS-модули. Важно пересмотреть архитектуру CSS и избегать конфликтов через правильную организацию кода.

Вопросы React Frontend Developer