How to   NOT write CSS            

The story of

Functional CSS benefits

Andrii Bohdanov

GitHub: https://github.com/AndrewBogdanovTSS
LinkedIn: https://www.linkedin.com/in/andrii-bohdanov-0828a02b/

Principal Frontend Engineer at VF Corp

Getting Started

1. Create Nuxt project

3. Add UnoCSS module to nuxt.config.ts:

pnpm create nuxt fun-css
export default defineNuxtConfig({
  modules: ['@unocss/nuxt']
})

4. (Optional) Create a uno.config.ts file:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

2. Install Required Packages

pnpm i -D unocss @unocss/nuxt

Performance benefits of Functional CSS

  • No XHR calls for CSS component chunks

  • Single CSS file (that can also be inlined directly in HTML)

  • Highly optimized CSS bundle

  • No FOUC

Optimized bundle delivery

Performance benefits of Functional CSS

Optimized bundle delivery

Rendering benefits of Functional CSS

  • CSS to SS: elimination of cascade complexities

  • Avoids CSSOM mutation when components mount/unmount into the DOM.

  • Changes only affect the relevant DOM subtree.

  • Faster rendering in component-heavy SPAs 

Faster Rendering

Build-time benefits of UnoCSS

  • On-Demand Generation

  • Minimal Core Design

  • No runtime analysis or DOM dependency

  • Single-Pass Scanning

  • Smart Caching

  • Parallel Processing

Lightning-Fast Builds

Scalability benefits

  • Token-Driven Styling

  • Consistent Naming

  • Reusable Patterns

  • Design Constraints

  • Reduced Custom CSS

  • Centralized Configuration

  • Design-to-Code Parity

CSS that describes Design System

OOCSS    vs    FCSS

Comparison Aspect Traditional CSS Functional CSS 
Context switching High - Separate CSS files/sections Low - Inline utility classes in markup
Support Cost High - global scope, specificity issues Low - isolated scope, no specificity
Runtime Performance Low - Manual optimization required, some optimizations not possible High: Auto-treeshaking, isolated utilities, no side effects, no CSS chunks
Buildtime Performance Slow - usually limited by a compiler (SASS/SCSS/PostCSS) Fast: No parsing, no AST, no scanning
Refactoring Risky - cascade and HTML structure dependencies Safe - no cascade, no structural dependencies
Learning Curve High: CSS methodologies + Preprocessors (BEM/OOCSS/SMACSS/SASS/LESS/etc.) Medium: Utility API memorization
Design Consistency Manual enforcement needed Enforced via constrained utilities
Initial Loading Larger CSS payload (unused rules common) Smaller - JIT eliminates unused styles
Abstraction Level High - abstracted class names Low - 1:1 CSS property mapping

In Summary

Conclusion

Embrace functional CSS for better performance and control.

Ask your questions

Thanks you!

Made with Slides.com