CSS in JS exists, here’s why
Development meets inline design
Introduction
Introduced around the mid-2010s, CSS-in-JS emerged as a revolutionary solution to styling issues in component-based JavaScript frameworks, primarily React. As frontend development pivoted towards component architectures, this approach to styling offered a way to intertwine JS logic with CSS, sparking both enthusiasm and debates in the community.
CSS-in-JS Unpacked
CSS-in-JS didn’t just magically appear; it was an answer to specific problems. Traditional CSS, while a mainstay since the late 90s, had some pitfalls when scaling up in large applications.
Differences from Traditional CSS
First, consider the legacy websites of the early 2000s: plain HTML with sprinklings of CSS, maybe a hover effect here and there. No components, just pages. As sites evolved, stylesheets ballooned. Developers experienced CSS’s “cascading” part in ways they never intended. Many have struggled with the quirks of web design. Ever heard of the frustrating need to use ! important just to make a style stick? You're in good company. A notable comment by Jeremy Keith, a leading figure in web development, humorously suggests that the 'C' in CSS might as well stand for 'chaos’
CSS-in-JS altered this narrative. It offered scoped styling, meaning styles applied to components without unintentional side effects elsewhere.
Popular Libraries
Two giants stand out: Styled Components and Emotion.
- Styled Components: Launched in 2016, its distinguishing trait was the employment of ES6 and CSS to style components. You weren’t just writing CSS; you were writing JavaScript.
- Emotion: Following close on Styled Component’s heels, Emotion became famous for its performance and flexibility. With Emotion, you had choices: want to write styles in an object notation akin to JavaScript? Go ahead. Prefer the classic CSS style? That works too.
But with all its merits, there were critics. Sean Larkin, a core team member of Webpack, highlighted a concern —
“Every time you add a runtime to a paradigm (like styling), you have to question, ‘What’s the cost?’”
CSS-in-JS: The Good
When a new method appears on the tech scene, it doesn’t gain traction without some tangible benefits. So, what was the fuss about CSS-in-JS?
• Componentization
React took the front by storm with its component architecture. It reshaped the way developers thought about UI. But with this innovation, a gap emerged. Traditional CSS was broad, and global. It didn’t neatly fit into this componentized world. Enter CSS-in-JS. It encapsulated styles, ensuring a button designed in one component wouldn’t accidentally morph a button three components over.
• Dynamic Styling
Websites are no longer static billboards. They respond, adapt, and live. Consider Spotify’s web player. Ever noticed how the theme shifts based on the album cover of the song you’re playing? That’s dynamic styling in action. With CSS-in-JS, JavaScript variables control styles. The line between functionality and appearance blurred.
• Scoped Styles
“Globals in CSS are a double-edged sword.” — Chris Coyier
With traditional CSS, styles cascaded everywhere, often creating unintended consequences. CSS-in-JS nipped this in the bud. Styles became local. A change here didn’t wreak havoc there.
• Developer Experience
Switching between JS and CSS files? It’s jarring. With CSS-in-JS, it’s one file, one mindset. The context remains undisturbed. It’s like reading a novel instead of jumping between two different magazines.
CSS-in-JS: The Caveats
Every silver lining has a cloud. While CSS-in-JS powered a new era of frontend development, it brought its own set of issues.
• Performance
Extra bytes count, especially on the web. Traditional CSS is static; once loaded, it’s there. CSS-in-JS? Not always. Dynamically generating styles can cause hiccups and slight delays. Remember the early days of Twitter’s “Like” animation? When it stuttered? That was a CSS-in-JS hiccup in action.
• Separation of Concerns
The mantra was clear for decades: HTML is for structure, CSS for presentation, and JS for behavior. It was a neat division.
“Are we, in our quest for efficiency, blurring lines that shouldn’t be blurred?” — Sarah Drasner
When your styles live inside your JavaScript, you’re challenging age-old wisdom.
• Learning Curve
Frontend newbies already juggle HTML, CSS, and JS. Toss in CSS-in-JS? It’s overwhelming. There’s a saying: “To a person with a hammer, everything looks like a nail.” For a newbie, CSS-in-JS might seem like a magic wand, but it’s not always the right tool.
• Unintended Effects
FOUC — or “Flash of Unstyled Content”. Ever loaded a webpage and, for a split second, seen an unstyled mess? That’s FOUC. With CSS-in-JS, especially if not implemented carefully, FOUC becomes a real danger. No user likes a site that feels like it’s momentarily falling apart.
Popular Use Cases of CSS in JS
If you’re still wondering why CSS-in-JS has become a go-to solution for many, consider these typical use cases where the technology shines brightest:
→ Theming and User Customization
Think of Slack’s dark mode or the customizable workspaces in Trello. With CSS-in-JS, themes can change dynamically, allowing users to personalize their experience without reloading the page.
→ Component Libraries
Ever used Material-UI in a React project? That’s CSS-in-JS at work. Creating reusable, styled components becomes significantly more straightforward, which is particularly beneficial for large projects and teams.
→ Server-Side Rendering
Next.js, a React framework, makes server-side rendering a breeze. But how do you manage styles when your HTML is generated on the server? CSS-in-JS can inject the necessary styles directly into the generated HTML, ensuring a seamless experience.
→ Animation and Interaction
Want to add a subtle fade-in effect or an intricate animation sequence? CSS-in-JS libraries can manipulate styles in real-time, providing a rich, interactive user experience. Netflix, for example, uses dynamic styles for smooth navigation and to highlight user interactions.
→ Content Management Systems
Take a platform like WordPress, now imagine it with deeply integrated, dynamic styling. With CSS-in-JS, content creators can tweak the design of posts or entire layouts with the same ease as editing text.
→ Multi-Platform Consistency
If you’re working on both a web app and a mobile app (think React and React Native), CSS-in-JS helps keep styles consistent across platforms. This kind of harmony is part of why companies like Uber have publically adopted the technology.
→ A/B Testing
Tech giants like Amazon and Facebook continually test new features. CSS-in-JS allows for dynamically altering styles based on user behavior or group, making A/B tests easier to manage and analyze.
GitHub’s CSS-in-JS Shift
Even in the tech world, where new trends surge daily, few platforms command the same respect as GitHub. Starting as a haven for code and evolving into the world’s largest open-source hub, GitHub’s frontend choices can shake up development communities.
Around 2019, GitHub started introducing more dynamic interactions, pushing beyond its static roots. With the rise of features like ‘GitHub Actions’ or ‘GitHub Packages’, the demand for a more interactive, fluid UI became pronounced.
To address this, they leaned into CSS-in-JS. It seemed to answer the call, enabling GitHub to create dynamic UI components, providing real-time feedback and intricate user interactivity.
A GitHub frontend developer shared in a podcast —
“When we started building Actions, we realized our traditional styling approach couldn’t keep up. With CSS-in-JS, we could immediately react to user inputs. It felt alive.”
This dynamic shift wasn’t just for aesthetics. It was business-critical. As GitHub moved into CI/CD with Actions, their success hinged on developers easily setting up workflows. A dynamic UI aided this, allowing users to understand action outcomes instantly.
But the shift came with its fair share of controversy.
“GitHub’s move to CSS-in-JS is fascinating. It’s a powerful tool, but I hope it doesn’t mean a compromise on performance, especially on such a core platform for developers.” — Chris Coyier
Conclusion
While a modern marvel in front-end development, CSS-in-JS isn’t a one-size-fits-all solution. Its rise, marked by fervent adoption by giants like GitHub and Reddit, showcases its potential to revolutionize UI dynamics. CSS-in-JS is a game-changer, but it’s not a cure-all. The key? Using it wisely. Just like any tool, it’s how you use it that counts.
Written by: Inchara, kubo media team.
Hey!
If you enjoyed reading this article and want more engaging content like this, don’t forget to follow our publication!
ANNOUNCEMENT 🔥
A glimpse into our Text-to-UI AI Tool
We’re working on our very own AI tool that lets you create fully editable screens just from text prompts!
Check it out here and don’t forget to join the waitlist :)
