CSS-in-JS решения

CSS-in-JS представляет собой подход к стилевому оформлению компонентов, при котором CSS определяется непосредственно в JavaScript. В контексте Preact это позволяет создавать изолированные и легко масштабируемые компоненты, управлять динамическими стилями и минимизировать конфликт имен классов.

Ключевые особенности подхода:

  • Инкапсуляция стилей на уровне компонента.
  • Динамическая генерация CSS в зависимости от состояния компонента.
  • Возможность использования JavaScript-переменных и логики при создании стилей.

Использование styled-components с Preact

Хотя styled-components чаще применяют с React, библиотека полностью совместима с Preact благодаря совместимым API. Она позволяет создавать компоненты с встроенными стилями.

Пример использования:

import { h } from 'preact';
import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    background-color: ${props => props.primary ? 'darkblue' : 'darkgray'};
  }
`;

export const App = () => (
  <div>
    <Button primary>Primary Button</Button>
    <Button>Default Button</Button>
  </div>
);

В этом примере:

  • Стили зависят от пропсов (primary).
  • CSS полностью инкапсулирован в компоненте, что исключает утечки стилей в другие элементы.

Локальные стили с preact-emotion

preact-emotion — облегчённая версия библиотеки emotion, оптимизированная под Preact. Она позволяет создавать стилизованные компоненты и работать с динамическими свойствами.

Пример:

import { h } from 'preact';
import { css } from 'preact-emotion';

const cardStyle = css`
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background-color: white;
`;

export const Card = ({ children }) => (
  <div className={cardStyle}>
    {children}
  </div>
);

Особенности:

  • Стили задаются через функцию css, которая возвращает уникальный класс.
  • Удобно для небольших проектов и компонентов без необходимости создания полноценного styled-компонента.

Динамическое применение стилей

CSS-in-JS позволяет применять стили условно и реагировать на состояние компонента. В Preact это делается с помощью обычных JavaScript-выражений.

Пример с состоянием:

import { h } from 'preact';
import { useState } from 'preact/hooks';
import styled from 'styled-components';

const ToggleButton = styled.button`
  background-color: ${props => props.active ? 'green' : 'red'};
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
`;

export const Toggle = () => {
  const [active, setActive] = useState(false);

  return (
    <ToggleButton active={active} onCl ick={() => setActive(!active)}>
      {active ? 'Active' : 'Inactive'}
    </ToggleButton>
  );
};

Принцип работы:

  • Состояние компонента напрямую влияет на стили.
  • Не требуется отдельная логика переключения классов в DOM.

Встраивание глобальных стилей

Даже при использовании CSS-in-JS иногда требуется глобальный CSS. В styled-components для этого существует createGlobalStyle.

Пример:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
  }
`;

export const App = () => (
  <>
    <GlobalStyle />
    <div>Контент приложения</div>
  </>
);

Особенности:

  • Глобальные стили применяются один раз при монтировании компонента.
  • Сохраняется совместимость с CSS-инкапсуляцией локальных компонентов.

Преимущества CSS-in-JS в Preact

  1. Изоляция компонентов — исключает конфликты классов.
  2. Динамичность — стили могут зависеть от пропсов и состояния.
  3. Поддержка модульности — легко разделять проект на независимые компоненты.
  4. Автоматическая оптимизация — многие библиотеки автоматически минимизируют и уникализируют классы.

Ограничения и особенности

  • Производительность: генерация стилей на лету может незначительно увеличивать время рендеринга, особенно при большом количестве компонентов.
  • Сложность настройки: интеграция некоторых CSS-in-JS библиотек требует дополнительной конфигурации сборщика (например, Webpack или Vite).
  • Глобальные стили: при частом использовании глобальных стилей теряется часть преимуществ инкапсуляции.

CSS-in-JS в Preact обеспечивает удобную и мощную систему для работы со стилями компонентов, сочетая возможности динамического JavaScript с привычными методами CSS. Этот подход делает код более модульным, поддерживаемым и гибким для построения современных интерфейсов.

Оглавление