В сфере фронтенд‑разработки каждый день приходится решать однотипные задачи: создавать и настраивать внешний вид компонентов, обеспечивать адаптивность и доступность UI без вреда для производительности. Чтобы избавить нас от этой рутины, были созданы библиотеки стилизации.

В данной статье мы рассмотрим одну из таких библиотек — Charka 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 ООО «МТ ФИНАНС»