CSS в Fresh

Fresh — современный фреймворк для разработки веб-приложений на JavaScript и TypeScript, построенный на базе Deno. Он обеспечивает нативную поддержку серверного рендеринга и оптимизированную работу с фронтендом. Одним из ключевых аспектов создания интерфейсов в Fresh является интеграция CSS. В отличие от традиционных SPA-фреймворков, Fresh использует подход, ориентированный на модульность и минимизацию клиентской нагрузки.

Подключение CSS

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

Для добавления CSS в проект Fresh можно использовать локальные файлы. Структура проекта обычно предполагает папку static для статических ресурсов, включая CSS:

project/
├─ static/
│  ├─ styles/
│  │  └─ main.css
├─ routes/
│  └─ index.tsx

В файле компонента или страницы подключение осуществляется через тег <link>:

export default function Home() {
  return (
    <>
      <head>
        <link rel="stylesheet" href="/styles/main.css" />
      </head>
      <body>
        <h1>Пример страницы с CSS</h1>
      </body>
    </>
  );
}

Важный момент: все файлы из папки static становятся доступными по прямому URL, что упрощает организацию статики.

Inline-стили

Fresh поддерживает добавление CSS непосредственно в компоненты с использованием JSX:

export default function Button() {
  return (
    <button style={{ backgroundColor: 'blue', color: 'white', padding: '10px 20px' }}>
      Нажми меня
    </button>
  );
}

Inline-стили удобны для быстрых изменений, но менее эффективны при масштабировании приложения.

Модульная организация CSS

Для крупных приложений рекомендуется использовать модульный CSS. Fresh позволяет импортировать CSS как модуль, обеспечивая локальную область видимости классов:

/* styles/button.module.css */
.button {
  background-color: green;
  color: white;
  border-radius: 5px;
  padding: 8px 16px;
}
import styles from "../styles/button.module.css";

export default function Button() {
  return <button className={styles.button}>Нажми меня</button>;
}

Ключевое преимущество модульного CSS — исключение коллизий имен классов и упрощение поддержки компонентов.

Использование TailwindCSS

Fresh хорошо интегрируется с TailwindCSS, позволяя писать утилитарные классы прямо в JSX. Tailwind ускоряет разработку и уменьшает количество кастомного CSS:

export default function Card() {
  return (
    <div className="max-w-sm mx-auto bg-white shadow-lg rounded-lg p-6">
      <h2 className="text-xl font-bold mb-4">Карточка</h2>
      <p className="text-gray-700">Содержимое карточки с TailwindCSS</p>
    </div>
  );
}

Конфигурация Tailwind в Fresh обычно происходит через tailwind.config.js, а обработка стилей осуществляется при сборке проекта с помощью deno task.

Scoped CSS и компоненты

Fresh не использует виртуальный DOM, что позволяет применять Scoped CSS — стили, ограниченные конкретным компонентом. Такой подход снижает влияние стилей на соседние элементы и повышает предсказуемость рендеринга:

/** @jsx h */
import { h } from "preact";
import { useState } from "preact/hooks";

export default function Toggle() {
  const [active, setActive] = useState(false);
  return (
    <div>
      <style>
        {`
          .toggle { padding: 10px; border: 1px solid #333; cursor: pointer; }
          .active { background-color: #333; color: #fff; }
        `}
      </style>
      <div
        className={`toggle ${active ? "active" : ""}`}
        onCl ick={() => setActive(!active)}
      >
        Переключить
      </div>
    </div>
  );
}

Анимации и переходы

Fresh полностью поддерживает CSS-анимации и переходы. Использование ключевых кадров позволяет создавать динамичные эффекты без Jav * aScript:

/* styles/animations.css */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out forwards;
}
export default function Alert() {
  return <div className="fade-in">Сообщение об ошибке</div>;
}

Оптимизация CSS

Fresh поддерживает tree-shaking и минимизацию CSS при сборке, что снижает размер финального пакета. Рекомендуется:

  • Разделять глобальные и компонентные стили.
  • Использовать модульный CSS или Tailwind для повторно используемых компонентов.
  • Избегать больших inline-стилей для элементов с повторяющимся оформлением.

Интеграция с PostCSS и другими препроцессорами

Fresh совместим с PostCSS и SCSS через стандартные сборочные задачи Deno. Пример конфигурации PostCSS:

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
    cssnano: {}
  }
};

Подключение SCSS аналогично:

/* styles/main.scss */
$primary-color: #3490dc;

body {
  background-color: $primary-color;
  font-family: Arial, sans-serif;
}

Компиляция происходит на этапе сборки с помощью deno task build.

Вывод

Работа с CSS в Fresh строится вокруг модульности и прямого управления стилями компонентов. Комбинация локальных файлов, модульного CSS, TailwindCSS и препроцессоров позволяет создавать производительные и легко поддерживаемые интерфейсы. Подход Fresh обеспечивает минимальную нагрузку на клиент и высокую предсказуемость стилей при рендеринге.

Оглавление