How do I set up media queries in stylefy for responsive designs?

Define media queries within your style maps using the ::stylefy/media key, as shown in the README with examples for flexbox layouts adapting to screen widths, allowing Clojure data to handle responsiveness directly.

What's the main difference between stylefy and Garden for Clojure styling?

Garden is a Clojure to CSS generator, while stylefy builds on Garden to automatically manage CSS classes and selectors, providing a higher-level API for component-based styling without writing CSS manually, as explained in the FAQ section comparing them.

Can I use stylefy with UI libraries other than Reagent or Rum?

Yes, stylefy offers a generic-dom module for other libraries, but it only supports synchronous DOM updates and is less optimized, potentially slowing down rendering compared to the Reagent or Rum modules.

How does caching work in stylefy and is it worth enabling?

stylefy caches generated CSS in HTML5 local storage by default to speed up frontend reloads, but it consumes storage space and can be disabled or configured with expiration, as detailed in the caching section, so evaluate based on your app's needs.

Is stylefy still actively maintained for modern Clojure projects?

No, the project is marked as legacy in the README, meaning it's not actively developed and may lack updates for newer Clojure ecosystems, so consider alternatives for long-term support.

How to handle pseudo-classes like :hover in stylefy without writing CSS?

Use the ::stylefy/mode key in your style maps to define pseudo-classes and elements, as demonstrated with hover effects and :before content, integrating them seamlessly into Clojure data structures.

stylefy — Clojure UI Styling Library

What is stylefy?

stylefy is a Clojure and ClojureScript library for styling user interface components using Clojure data structures. It solves the problem of managing CSS selectors and class names by automatically converting style maps to scoped CSS classes at runtime, providing a seamless way to style components without writing traditional CSS.

Target Audience

Clojure and ClojureScript developers building web applications with UI libraries like Reagent or Rum, who prefer a data-driven approach to styling and want to avoid CSS selector complexity.

Value Proposition

Developers choose stylefy for its elegant integration with Clojure's data-oriented paradigm, offering full CSS feature support (including media queries and pseudo-classes) without the overhead of manual CSS class management, while enabling server-side rendering and style caching.

Clojure(Script) library for styling user interface components.

Use Cases

Best For

Styling Reagent or Rum components with Clojure data maps
Building isomorphic ClojureScript applications with server-side rendered styles
Managing complex UI styles without writing CSS selectors
Creating responsive designs with inline media queries in style maps
Implementing pseudo-classes (e.g., :hover) directly in Clojure styles
Caching generated CSS for faster frontend reloads

Not Ideal For

Teams building new ClojureScript applications with modern UI frameworks that have native styling solutions
Projects requiring active library maintenance and frequent updates for compatibility with newer Clojure versions
Developers needing plug-and-play styling with zero configuration or minimal setup overhead
Applications where synchronous style application is critical, to avoid brief visibility hides during async DOM updates

Pros & Cons

Pros

Data-Driven Style Definitions

Styles are defined as Clojure maps, enabling easy composition, parameterization, and reuse, as demonstrated in the README with examples like merging styles and function-based generation.

Automatic Scoped CSS

Converts style maps to unique, scoped CSS classes at runtime via Garden, eliminating manual CSS selector management and preventing style conflicts in component-based apps.

Full CSS Feature Support

Supports pseudo-classes (modes), media queries, feature queries, and vendor prefixes directly within style maps, allowing responsive designs without external CSS files.

Server-Side Rendering

Provides stylefy/query-with-styles for backend style generation, facilitating isomorphic applications with consistent styling across server and client, as outlined in the backend setup.

Cons

Legacy Project Status

The README explicitly states it's built for a previous era of Clojure & CSS and recommends choosing a different library, indicating limited maintenance and future support.

Complex Initial Setup

Requires manual insertion of style tags, initialization with specific UI modules (e.g., Reagent or Rum), and additional steps for multi-instance support or caching, increasing setup overhead.

Asynchronous DOM Updates

Styles are added asynchronously by default, which can cause elements to be briefly hidden with visibility: hidden, requiring workarounds like prepare-style for synchronous updates, potentially impacting performance.

Frequently Asked Questions

What is stylefy?

Target Audience

Clojure and ClojureScript developers building web applications with UI libraries like Reagent or Rum, who prefer a data-driven approach to styling and want to avoid CSS selector complexity.

Value Proposition

Use Cases

Best For

Styling Reagent or Rum components with Clojure data maps
Building isomorphic ClojureScript applications with server-side rendered styles
Managing complex UI styles without writing CSS selectors
Creating responsive designs with inline media queries in style maps
Implementing pseudo-classes (e.g., :hover) directly in Clojure styles
Caching generated CSS for faster frontend reloads

Not Ideal For

Teams building new ClojureScript applications with modern UI frameworks that have native styling solutions
Projects requiring active library maintenance and frequent updates for compatibility with newer Clojure versions
Developers needing plug-and-play styling with zero configuration or minimal setup overhead
Applications where synchronous style application is critical, to avoid brief visibility hides during async DOM updates

Pros & Cons

Pros

Data-Driven Style Definitions

Styles are defined as Clojure maps, enabling easy composition, parameterization, and reuse, as demonstrated in the README with examples like merging styles and function-based generation.

Automatic Scoped CSS

Converts style maps to unique, scoped CSS classes at runtime via Garden, eliminating manual CSS selector management and preventing style conflicts in component-based apps.

Full CSS Feature Support

Supports pseudo-classes (modes), media queries, feature queries, and vendor prefixes directly within style maps, allowing responsive designs without external CSS files.

Server-Side Rendering

Provides stylefy/query-with-styles for backend style generation, facilitating isomorphic applications with consistent styling across server and client, as outlined in the backend setup.

Cons

Legacy Project Status

The README explicitly states it's built for a previous era of Clojure & CSS and recommends choosing a different library, indicating limited maintenance and future support.

Complex Initial Setup

Requires manual insertion of style tags, initialization with specific UI modules (e.g., Reagent or Rum), and additional steps for multi-instance support or caching, increasing setup overhead.

Asynchronous DOM Updates

Frequently Asked Questions

stylefy

What is stylefy?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?

stylefy

What is stylefy?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?