Understanding CSS Variables for Scalable Design
HTML5 & CSS3
SCSS
JavaScript
TypeScript
React
Next.js
Tailwind CSS
Bootstrap
ShadCN UI
Styled Components
GSAP
Framer Motion
Vite
Shopify themes
i18next & RTL
Recharts
Chart.js
SaaS dashboards
Figma to UI
Dark / light mode
4+ years
Vistothemes
Freelance UI
NFT & crypto UI
eCommerce UI
WordPress CSS
Remote-ready
Muhammad Shahzaib
Pixel-perfect
Component architecture
Live demos
HTML5 & CSS3
SCSS
JavaScript
TypeScript
React
Next.js
Tailwind CSS
Bootstrap
ShadCN UI
Styled Components
GSAP
Framer Motion
Vite
Shopify themes
i18next & RTL
Recharts
Chart.js
SaaS dashboards
Figma to UI
Dark / light mode
4+ years
Vistothemes
Freelance UI
NFT & crypto UI
eCommerce UI
WordPress CSS
Remote-ready
Muhammad Shahzaib
Pixel-perfect
Component architecture
Live demos
CSS custom properties (`--variable-name`) turned what used to require a preprocessor like Sass into native, runtime-editable values. The dark/light theme toggle on this site works entirely through variables like this — swap the values on `:root`, and every component that references them updates instantly.
Declaring and using variables
Define a variable anywhere with --name: value; and read it with var(--name, fallback). Declared on :root, a variable is available globally; declared on a component class, it's scoped to that component and anything nested inside it.
Theming with a class toggle
Define a light-mode value on :root and override it under a .dark selector (or html.dark). Toggling one class on <html> re-theme the entire page — no JavaScript needed to touch individual elements.
Variables vs. Sass variables
Sass variables are compiled away at build time — static. CSS custom properties live in the browser and can be read, changed, and inherited at runtime, which is exactly what makes live theme switching and per-component overrides possible.
:root {
--color-background: #f8f9fb;
--color-ink: #0d1017;
}
html.dark {
--color-background: #0a0b0f;
--color-ink: #f4f6f9;
}
body {
background: var(--color-background);
color: var(--color-ink);
}Once a project has more than a handful of colors and spacing values, custom properties stop being a nice-to-have and become the thing that keeps a redesign a one-file change instead of a find-and-replace across the whole codebase.
← back to all writingMuhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
Figma to UI
Muhammad Shahzaib
4+ years
Vistothemes
Freelance UI
Muhammad Shahzaib
Remote work
pixel-perfect
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
UI-only scope
Muhammad Shahzaib
your mockups
production UI
Muhammad Shahzaib
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
Figma to UI
Muhammad Shahzaib
4+ years
Vistothemes
Freelance UI
Muhammad Shahzaib
Remote work
pixel-perfect
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
UI-only scope
Muhammad Shahzaib
your mockups
production UI
Muhammad Shahzaib
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
Figma to UI
Muhammad Shahzaib
4+ years
Vistothemes
Freelance UI
Muhammad Shahzaib
Remote work
pixel-perfect
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
UI-only scope
Muhammad Shahzaib
your mockups
production UI
Muhammad Shahzaib
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
Figma to UI
Muhammad Shahzaib
4+ years
Vistothemes
Freelance UI
Muhammad Shahzaib
Remote work
pixel-perfect
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
UI-only scope
Muhammad Shahzaib
your mockups
production UI
Muhammad Shahzaib
