How to Transition from CSS-in-JS to Vanilla CSS and CSS Variables
Designed for Front-end engineers with prior CSS-in-JS experience, now tasked with modernizing legacy UIs or onboarding to projects using Vanilla CSS and CSS Variables. to spark real collaboration and high-energy learning.
A 90-minute virtual workshop for a product engineering squad with mixed seniority. The team is moving away from a React app styled with styled-components to a company-standard Vanilla CSS setup. Many worry about losing encapsulation, dynamic theming, and developer productivity.
Magic CSS Reveal Demo
Kick off with a split-screen, live demo: side-by-side, display a familiar React component—one styled with CSS-in-JS, the other in Vanilla CSS using variables. Change a color variable in real time and show the instant, global update. Invite rapid-fire guesses about what happened under the hood.
Tap to view the full activity.
Why this works
Seeing instant feedback and a familiar UI lowers the barrier to curiosity. Contrasting approaches side-by-side launches dopamine for problem-solvers.
Mythbusters: CSS-in-JS Edition
Use a quick-fire poll to bust top misconceptions (e.g., 'CSS-in-JS is always faster.' 'You lose all theming flexibility with Vanilla CSS.'). Debrief each with a concrete fact or counterexample—backed by quick code snippets or a performance chart.
Tap to view the full activity.
Why this works
Calling out myths head-on resets cognitive biases and primes brains for new evidence.
2-Minute Quick Win Challenge
Send participants a short, copy-paste snippet: a button styled with CSS-in-JS. Instruct them to highlight, in the chat, two CSS properties that would be easiest to migrate as variables. No wrong answers—just quick pattern-spotting.
Tap to view the full activity.
Why this works
Low-stakes, time-bound activities reduce performance anxiety and foster engagement from everyone, even quieter folks.
Fastest Refactor Showdown
Divide into breakout pairs or small groups. Each receives a live code sandbox with a simple CSS-in-JS card component. Race to refactor: replace at least two colors and one font-size with CSS Variables in a Vanilla CSS file. First team done shares their approach on main screen—energy and applause!
Tap to view the full activity.
Why this works
A timed, collaborative challenge boosts adrenaline and team bonding, cementing the learning through friendly competition.
Theme Switcher: The Stakeholder Test
Share a quick story: a PM asked you to add dark mode across 30 components in a day. Prompt: "Would you rather do this with CSS-in-JS or Vanilla CSS + Variables? Why?" Invite short group debate—using examples from their own projects—for 5 minutes.
Tap to view the full activity.
Why this works
Connecting to real stakeholder demands and time pressure helps participants envision practical benefits and tradeoffs.
CSS Diary: My Practice Plan
Guide each participant to write a short, private 'commitment note' answering: 'What’s the first Vanilla CSS + Variables refactor you’ll tackle this month?' Briefly share one sentence with the group or in the chat. Optionally, prompt them to calendar their practice time.
Tap to view the full activity.
Why this works
Personal goal-setting and commitment increase follow-through, while sharing builds accountability and connection.
Sign up to unlock 3 more activities
Get the full pack, facilitation flow, and more ready-to-run ideas.