How to NOT write CSS
The story of
Functional CSS benefits
Andrii Bohdanov
GitHub: https://github.com/AndrewBogdanovTSSLinkedIn: 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-cssexport 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/nuxtPerformance 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!
Code
By Andrey