Модульные стили

Fresh — это современный фреймворк для разработки веб-приложений, построенный на Deno и ориентированный на минимализм и высокую производительность. В основе его философии лежит zero-runtime JavaScript на клиенте: большинство логики выполняется на сервере, а клиент получает уже готовый HTML с динамическими компонентами. Это кардинально отличается от подходов React или Vue, где значительная часть работы выполняется в браузере.

Архитектура приложений на Fresh

Приложение на Fresh строится вокруг страниц, компонентов и обработчиков запросов. Основные элементы:

  • Pages — маршруты приложения, определяемые файлами в папке routes/. Каждый файл соответствует конкретному URL.
  • Components — повторно используемые UI-блоки, аналог React-компонентов, но без необходимости клиентского runtime.
  • Handlers — серверная логика, которая обрабатывает HTTP-запросы и передает данные компонентам.

Fresh использует islands architecture: интерактивные участки страницы (islands) выделяются в отдельные компоненты с минимальным JavaScript на клиенте.

Работа с модульными стилями

Модульные стили в Fresh позволяют изолировать CSS на уровне компонентов, предотвращая конфликты селекторов. Основные принципы:

  1. Создание CSS-модулей Каждый компонент может иметь собственный CSS-файл с расширением .module.css. Например:

    /* button.module.css */
.primary {
  background-color: #0070f3;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

    Использование классов ограничивается конкретным компонентом.

  2. Импорт CSS-модуля в компонент Импорт выполняется напрямую в файл компонента:

    import styles from "./button.module.css";

export default function Button({ label }) {
  return <button class={styles.primary}>{label}</button>;
}

    При этом Fresh автоматически генерирует уникальные классы для предотвращения пересечений с другими компонентами.

  3. Динамическое применение стилей Классы можно комбинировать с помощью шаблонных литералов или вспомогательных библиотек:

    import styles from "./button.module.css";

export default function Button({ label, disabled }) {
  return (
    <button class={`${styles.primary} ${disabled ? styles.disabled : ""}`}>
      {label}
    </button>
  );
}

Поддержка глобальных стилей

В дополнение к модульным стилям можно использовать глобальные CSS-файлы, которые подключаются один раз на уровне всего приложения. Рекомендуется хранить их в папке static/ и подключать через <link> в шаблоне _app.tsx.

<link rel="stylesheet" href="/styles/global.css" />

Глобальные стили удобно использовать для типографики, сеток и общих утилитарных классов, в то время как модульные стили предназначены для локальной изоляции компонентов.

Особенности и оптимизация

  • Tree-shaking CSS — Fresh автоматически удаляет неиспользуемые стили при сборке.
  • Scoped классы — уникальные имена классов минимизируют конфликты и облегчают поддержку крупных проектов.
  • SSR и CSS — все стили включаются в HTML на сервере, что ускоряет первую загрузку страницы и улучшает SEO.
  • Поддержка TypeScript — при использовании .module.css можно подключать стили с типизацией для автокомплита и проверки типов.

Интеграция с Tailwind и другими утилитами

Fresh позволяет сочетать модульные CSS с утилитарными библиотеками, такими как Tailwind CSS:

import styles from "./card.module.css";

export default function Card({ title, content }) {
  return (
    <div class={`p-4 rounded shadow ${styles.card}`}>
      <h2 class="text-xl font-bold">{title}</h2>
      <p>{content}</p>
    </div>
  );
}

Модульные стили применяются для уникальных деталей компонента, а Tailwind обеспечивает быструю настройку базовой визуальной структуры.

Практические рекомендации

  • Использовать модульные стили для всех интерактивных компонентов.
  • Минимизировать глобальные стили, оставляя их только для универсальных утилит.
  • При работе с крупными проектами делить CSS на маленькие модули по функциональности, чтобы улучшить читаемость и поддержку кода.
  • Комбинировать модульные стили с серверным рендерингом для оптимизации скорости загрузки страницы.

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

Оглавление