Вопросы React Frontend Developer

CSS-препроцессоры, такие как Sass и Less, позволяют использовать переменные, вложенные правила, функции и миксины, что упрощает создание и поддержку стилей. Они способствуют модульности и повторному использованию кода, что делает стили более структурированными и удобными для изменения. Препроцессоры также добавляют возможность логических операций и циклов, что невозможно в обычном CSS.

Темную тему можно реализовать с помощью CSS-медиавыражения prefers-color-scheme, которое определяет предпочтения пользователя относительно цветовой схемы (светлой или темной). В зависимости от предпочтений браузера применяются соответствующие стили. Также можно настроить переключение темы вручную с помощью JavaScript и CSS-классов.

CSS box model - это основной концепт в CSS, описывающий как элементы на веб-странице представлены в виде прямоугольных блоков, состоящих из контента, отступов, границ и внутренних полей.

Специфичность в CSS — это способ определения приоритета CSS-правил, когда к одному элементу применяются несколько конфликтующих стилей. Она рассчитывается на основе количества селекторов разных типов в правиле:

• Инлайн-стили (например, style="color: red;") имеют наивысший приоритет.

• ID-селекторы (#id) более специфичны, чем классы (.class) или теги (div).

• Универсальные селекторы (*) и каскадность имеют минимальный приоритет.

 Например:

#id { color: blue; } /* более специфично, чем */
.class { color: green; }

Для работы с классами на элементах DOM используйте методы classList. Вы можете добавлять, удалять и проверять классы с помощью методов add(), remove() и contains(). Например:

const element = document.getElementById('myElement'); element.classList.add('active');

Этот код добавляет класс active к элементу.