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