Skip to content

Styling in Jac#

This guide covers all styling approaches available in Jac web applications. Each approach is demonstrated with a complete, working counter application example.

Quick Navigation#

Available Examples#

Styling Approach Documentation Example Location
Pure CSS Traditional CSS with external stylesheet examples/css-styling/pure-css/
Tailwind CSS Utility-first CSS framework examples/css-styling/tailwind-example/
Sass/SCSS CSS preprocessor with variables, mixins, nesting examples/css-styling/sass-example/
Styled Components CSS-in-JS with styled-components examples/css-styling/styled-components/
JavaScript Styling Inline styles using JavaScript objects examples/css-styling/js-styling/
Material-UI React component library with Material Design examples/css-styling/material-ui/

Styling Approaches Overview#

Traditional CSS#

  • Pure CSS — Standard CSS with external stylesheets
  • Maximum control, minimal dependencies
  • Perfect for simple projects and learning

CSS Preprocessors#

  • Sass/SCSS — Variables, nesting, mixins, and functions
  • Better organization for large projects
  • DRY principles with reusable code

Utility-First CSS#

  • Tailwind CSS — On-demand utility classes
  • Rapid UI development
  • Consistent design system

CSS-in-JS Libraries#

  • Styled Components — CSS-in-JS with template literals
  • Component-scoped styles

  • Dynamic styling with props

  • JavaScript Styling — Inline styles using JavaScript objects

  • Programmatic style generation
  • Dynamic styles based on state

Component Libraries#

  • Material-UI — Comprehensive React component library
  • Pre-built, accessible components
  • Material Design system

Choosing the Right Approach#

Decision Matrix#

Approach Complexity Bundle Size Runtime Cost Best For
Pure CSS Low Small None Simple projects
Tailwind Medium Small* None Rapid development
Sass/SCSS Medium Small None Large projects
Styled Components Medium Medium Medium Component libraries
JavaScript Styling Low Small Low Dynamic styles
Material-UI Low Large Low Enterprise apps

*Tailwind bundle size is small after purging unused classes.

Quick Decision Guide#

Choose Pure CSS if: - Building a simple application - Wanting minimal dependencies - Learning CSS fundamentals

Choose Tailwind CSS if: - Building modern UIs quickly - Preferring utility classes - Needing responsive design

Choose Sass/SCSS if: - Working on large projects - Needing variables and mixins - Wanting better organization

Choose Styled Components if: - Wanting component-scoped styles - Needing dynamic styling - Preferring CSS-in-JS

Choose JavaScript Styling if: - Needing dynamic styles - Preferring JavaScript - Building component libraries

Choose Material-UI if: - Wanting pre-built components - Needing accessibility - Preferring Material Design

Import Syntax#

All styling approaches use the cl import syntax for client-side imports:

CSS Files#

# Pure CSS
cl import ".styles.css";

# Sass/SCSS
cl import ".styles.scss";

JavaScript Modules#

# Default export
cl import from .styles { default as styles }

# Named exports
cl import from .styled { Container, Card, Button }

External Packages#

# Styled Components
cl import from "styled-components" { default as styled }

# Material-UI
cl import from "@mui/material/Button" { default as Button }
cl import from "@mui/icons-material/Add" { default as AddIcon }

Running Examples#

Each example is a complete, runnable project:

# Navigate to example directory
cd jac_client/examples/css-styling/<example-name>

# Install dependencies
npm install

# Run the application
jac serve app.jac

Best Practices#

General Styling#

  1. Consistency: Choose one approach per project
  2. Performance: Consider bundle size and runtime cost
  3. Maintainability: Keep styles organized and documented
  4. Accessibility: Ensure styles don't break accessibility
  5. Responsive: Design mobile-first

CSS Files#

  1. Organization: Use comments to separate sections
  2. Naming: Use semantic class names (BEM, etc.)
  3. Specificity: Avoid overly specific selectors
  4. Variables: Use CSS custom properties for theming

CSS-in-JS#

  1. Scoping: Leverage component-scoped styles
  2. Performance: Memoize expensive styled components
  3. Theming: Use theme providers for global styles
  4. Props: Keep prop-based styling simple

Component Libraries#

  1. Customization: Use theme system for brand colors
  2. Variants: Prefer built-in variants when possible
  3. Composition: Compose components for flexibility
  4. Accessibility: Use accessible components by default

Resources#

Upcoming Styling Patterns

The following styling approaches are planned for documentation in Jac, but full code examples are coming soon: --- CSS-in-JS Libraries
  • Emotion — CSS-in-JS with similar API to styled-components
  • Styled JSX — CSS-in-JS (Next.js style)
CSS Modules
  • CSS Modules — Scoped CSS with local class names
Modern CSS
  • CSS Variables (Custom Properties) — Native CSS variables for theming
  • PostCSS — CSS transformations and plugins
Component Libraries
  • Chakra UI — Modular and accessible component library
  • Ant Design — Enterprise-focused component library
  • Radix UI — Unstyled, accessible primitives
  • Mantine — Full-featured React components
CSS Frameworks
  • Bulma — Flexbox-based CSS framework
  • Foundation — Responsive framework
  • Semantic UI — Natural language class names
Zero-runtime CSS-in-JS
  • Vanilla Extract — Type-safe, zero-runtime CSS-in-JS
  • Linaria — Zero-runtime CSS-in-JS
  • Stitches — CSS-in-JS with variants API
Utility-first
  • UnoCSS — On-demand atomic CSS engine
Examples for these patterns will be added soon.

Contributing#

When adding new styling examples:

  1. Create a new directory in examples/css-styling/
  2. Include a complete working counter app
  3. Add a README.md with setup instructions
  4. Create a documentation file in docs/styling/
  5. Update this intro.md file
  6. Follow the existing example structure