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

Location: Lugano, Switzerland

20 years of experience in Web Development

The history behind Functional CSS

How did we even get here?

2014 - ACSS

2015 - BassCSS

2016 - Tachyons

2017 - TailwindCSS

2020 - WindiCSS

2021 - TWind

2021 - UnoCSS

Fundamental Articles

you need to read

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

Cloning the repo

1. Clone the project

3. Enjoy :)

https://github.com/AndrewBogdanovTSS/fun-css

2. Install dependencies

pnpm i

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!

Copy of How to not write CSS

By Andrey

Made with Slides.com

Copy of How to not write CSS

  • 11

More from Andrey