В сфере фронтенд‑разработки каждый день приходится решать однотипные задачи: создавать и настраивать внешний вид компонентов, обеспечивать адаптивность и доступность UI без вреда для производительности. Чтобы избавить нас от этой рутины, были созданы библиотеки стилизации.
В данной статье мы рассмотрим одну из таких библиотек — Chakra UI V3 в связке с React, так как она не особо большая и проста в изучении. В разных библиотеках синтаксис может немного отличаться, но в основном они все решают одни и те же проблемы. Давайте разберёмся, как она способна помочь нам в разработке.
Какие задачи решают библиотеки стилизации?
Когда пишешь CSS с нуля, часто сталкиваешься с такими проблемами:
Медленно: стили для компонентов можно клеить часами и днями.
Непоследовательность: в больших проектах сложно поддерживать визуальное единообразие. Легко забыть, что надо стилизовать аналогично другому компоненту, а что сделать чуть по-другому.
Доступность: нужно, чтобы люди, у которых что-то с глазами/ушами/руками, могли пользоваться вашим приложением.
Производительность: со временем CSS-файлы разрастаются, накапливая неиспользуемые или дублирующиеся стили, что увеличивает время загрузки страницы.
Решение главных проблем
Chakra UI — простая, модульная и доступная библиотека компонентов для React, которая устраняет все эти проблемы. Вот как она это делает:
1. Избавляемся от стилей
Chakra UI использует подход, при котором стили определяются непосредственно в компоненте через специализированные атрибуты (props). Вместо написания CSS с нуля вы используете готовые компоненты:
import { Button } from "@chakra-ui/react" function App() { return ( <Button> Отправить </Button> ) }
Импортируем «кнопку» — и получаем сразу стилизованный и легко настраиваемый компонент. Эта кноп��а уже будет выглядеть не как в стандартном HTML и придерживаться единого стиля библиотеки. Её стили можно легко изменить, просто добавив необходимые пропсы напрямую в HTML:
<Button colorScheme="teal" // Цветовая схема (фон, границы, hover-эффекты) size="lg" // Размер (lg = large) borderRadius="md" // Радиус скругления углов boxShadow="lg" // Тень (lg = large) _hover={{ transform: "translateY(-2px)", // Эффект поднятия при наведении boxShadow: "xl" // Увеличение тени при наведении }} > Отправить </Button>
Как видно на примере, все наши стили встроены в виде атрибутов напрямую в тэг. В Chakra UI есть атрибуты под все возможные css-свойства. Каждый атрибут отвечает за конкретное свойство.
Также есть возможность использования псевдоклассов, таких как :hover, просто они прописываются через символ _ вместо : и через двойные фигурные скобки в них записываются css-свойства.
Для сравнения, как бы это примерно выглядело в CSS:
.button { background-color: #319795; color: white; padding: 0.75rem 1.5rem; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); transition: all 0.2s; } .button:hover { transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
Наш код с использованием Chakra UI вышел более читаемым и компактным. Также состояния focus и active прописаны изначально в компоненте, что при использовании CSS необходимо делать вручную.
2. Соблюдаем единую стилизацию
В первом пункте я показывал прописывание пропсов напрямую в компонент, но библиотеки также позволяют создать единую тему, которая изменит стили у всех компонентов сразу. Как пример, тему можно настроить, чтобы создать переменную цвета:
import { ChakraProvider, createSystem, defaultConfig, defineConfig, Button } from "@chakra-ui/react" const config = defineConfig({ // создание конфига theme: { tokens: { colors: { 'accent': { value: '#6ED209' }, // сама переменная со значением }, }, }, }) const system = createSystem(defaultConfig, config) export default function App() { return ( <ChakraProvider value={system }> {/* прописываем наш конфиг в корень */} <Button bg="accent"> {/* применение на практике */} Кнопка акцентного цвета </Button> </ChakraProvider> ) }
Это один из вариантов, который использует токены для хранения цвета. Вы можете создавать токены для разных задач, подробнее можно прочитать в документации. Самое главное, что этот акцентный цвет мы теперь можем использовать во всех внутренних компонентах без необходимости его заново определять.
Если вынести config в отдельный файл, то мы получим единое место со всеми нашими стилями. Как пример, файл может выглядеть подобным образом:
import { defineConfig, createSystem, defaultConfig } from '@chakra-ui/react' const config = defineConfig({ globalCss: { // Прописывание глобальных стилей body: { margin: '0', }, html: { scrollBehavior: 'smooth', }, }, theme: { tokens: { // Определение переменных colors: { 'token-black': { value: '#151613' }, 'token-white': { value: '#F5FFF7' }, }, }, semanticTokens: { // Токены цветов при смене темы colors: { back: { value: { base: '{colors.token-white}', _dark: '{colors.token-black}', }, }, text: { value: { base: '{colors.token-black}', _dark: '{colors.token-white}', }, }, }, }, }, }) export const system = createSystem(defaultConfig, config)
Любые изменения, внесённые в этот файл, будут автоматически применены ко всему приложению. Данный пример показывает лишь малую часть возможностей кастомной темы, но основная идея понятна.
3. Встроенная поддержка доступности
Chakra UI разработана с учётом стандартов WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications). Каждый компонент семантически правильный и имеет нужные атрибуты ARIA:
import { Alert, AlertIcon, Button, Menu, MenuButton, MenuList, MenuItem } from "@chakra-ui/react" import { ChevronDownIcon } from "@chakra-ui/icons" // пример компонента уведомления function Notification() { return ( <Alert status="success" aria-live="polite"> <AlertIcon /> Ваши данные успешно сохранены! </Alert> ) } // пример выпадающего меню function AccessibleDropdown() { return ( <Menu> <MenuButton as={Button} rightIcon={<ChevronDownIcon />}> Действия </MenuButton> <MenuList> <MenuItem>Редактировать</MenuItem> <MenuItem>Удалить</MenuItem> <MenuItem>Скопировать</MenuItem> </MenuList> </Menu> ) }
В примере с Alert компонент автоматически получает правильную роль и атрибут aria-live="polite", который сообщает скринридерам о необходимости озвучить изменение содержимого. В выпадающем меню Chakra UI автоматически управляет фокусом — при открытии меню фокус перемещается на первый элемент, а при закрытии возвращается на кнопку. Так же, что немаловажно, все интерактивные компоненты, такие как меню, поддерживают навигацию с клавиатуры (стрелки, Tab, Escape).
То есть мы не только избавились от необходимости стилизовать и прописывать через «костыли» тот же компонент выпадающего меню, так как это невозможно в обычном HTML, но и получили правильно прописанное поведение. Немаловажно, что все наши компоненты получились с правильными HTML-тегами, что позволяет не нарушать семантику и не прописывать её вручную.
4. Создаём адаптивный интерфейс
Создание адаптивного интерфейса в Chakra UI — простая задача. В библиотеке встроено удобное прописывание адаптивных стилей без необходимости использованияmedia-запросов. Для этого значения CSS-свойств передаются в виде массива, где каждый элемент соответствует определённой точке остановки (брейкпоинту):
<Box width={["100%", "80%", "60%", "40%"]} fontSize={["sm", "md", "lg", "xl"]} p={[2, 4, 6, 8]} display={["block", "block", "flex"]} > <Text mb={[4, 4, 0]} mr={[0, 0, 4]}> Адаптивный текст </Text> <Button size={["sm", "md"]}> Кнопка </Button> </Box>
Массив ["100%", "80%", "60%", "40%"] соответствует четырём брейкпоинтам по умолчанию: [base, sm, md, lg]:
На мобильных устройствах (базовый размер) ширина будет
100%На планшетах
(sm)—80%На маленьких десктопах
(md)—60%На больших экранах
(lg)—40%
Сравнение с CSS:
/* Вместо этого в CSS */ .container { width: 100%; padding: 0.5rem; font-size: 0.875rem; display: block; } @media (min-width: 30em) { .container { width: 80%; padding: 1rem; font-size: 1rem; } } @media (min-width: 48em) { .container { width: 60%; padding: 1.5rem; font-size: 1.125rem; display: flex; } } @media (min-width: 62em) { .container { width: 40%; padding: 2rem; font-size: 1.25rem; } }
Здесь мы можем увидеть колоссальное сокращение кода, что сделало его более чистым и понятным.
5. Оптимизируем производительность
Chakra UI применяет комплексный подход к оптимизации, чтобы минимизировать влияние на скорость работы приложения. Некоторые могут быть вам знакомы, но главное, что большинство улучшений происходят без вашего участия. Вот два основных:
Tree Shaking и импорт только нужных компонентов
// ПРАВИЛЬНО - импортируем только нужные компоненты import { Button, Box, Text } from "@chakra-ui/react" // НЕПРАВИЛЬНО - такой импорт увеличит размер бандла import ChakraUI from "@chakra-ui/react"
Ленивая загрузка стилей
Компоненты загружают только те стили, которые действительно используются:
// Chakra UI сгенерирует CSS только для этих компонентов function App() { return ( <Box p={4}> <Text fontSize="xl">Заголовок</Text> <Button colorScheme="blue">Действие</Button> </Box>) }
Преимущество перед традиционными подходами:
/* В обычном CSS часто приходится импортировать весь файл */ @import "bootstrap.css"; /* ~200KB неиспользуемых стилей */ /* Или в CSS-in-JS без оптимизации */ const styles = css` /* Все стили компонента, даже если они не используются */ `
В результате этих оптимизаций достигается отсутствие неиспользуемых CSS-файлов, уменьшение размера бандла, ускорение начальной загрузки страницы и повышение общей производительности приложения.
Итоги
Библиотеки стилизации позволяют сильно упростить фронтенд-разработку, комплексно решая ключевые проблемы. На примере Chakra UI мы увидели, как простое добавление библиотеки позволило создавать интерфейсы при помощи готовых компонентов, которые сразу будут адаптивны и иметь единую стилизацию.
Данный подход не только ускорит вашу разработку, но и повысит качество и читаемость кода, улучшит его производительность и позволит сосредоточиться на написании логики приложения, а не переписывании стандартных компонентов.
© 2025 ООО «МТ ФИНАНС»
