In the last few days a new CSS vs. CSS-in-JS (CiJ) debate started, fuelled by this gist from Sunil Pai:
https://twitter.com/snookca/status/1073299331262889984?s=21 Happy to chat about this. There's an obvious disclaimer…
He outlines his position about this topic and why he thinks CiJ is the natural evolution to CSS. You should definitely give it a read plus the small dialogue between Sunil and Snook in the comments.
Unfortunately there has been a lot of hate thrown at him and everyone who is using CiJ, I would like to address it with an example from a fairly complex web-app.
The Beginnings 🏗
In early 2017 (I was not part of the company yet) the company decided to do a complete Refactor of it‘s slow Meteor app with sometimes 15 seconds load times, to a much more modern Tech Stack in React and GraphQL. So in July the team started with this project.
As the developers at the start of this endeavour where not experts in setting up a Component System snd just started with React, they decided to use React Bootstrap for styling, which reduced the possibilities of the Styling stack to CSS or SASS.
When me and my friend (a Senior UI/UX Designer) joined together towards the end of the year, this was not enough for us. We wanted to build a complex Design System that fit the brand and gave us more speed. But the refactoring project was going to its end and big changes were not possible, so we did our best and we introduced CSS Modules to the stack.
CSS Modules 📦
Now even though the transition to CSS Modules was easy this introduced a lot of challenges:
- How do we add multiple classes? The classNames library or concatenation?
- How to apply new styles when some prop or something on the page changes?
- How do we reuse styles?
A lot of questions popped up and there was no clear convention, as there was no Lead Developer at that time, so many different coding styles were introduced and we were never really happy with that approach.
As soon as the refactoring project finished, I started developing a stand-alone project for the Booking Process, so I had the chance to start from scratch and implement the Design System, that we wanted from the start. The result of that was our internal UI-Kit, built with styled-components.
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 -…
The way we approached it was building for example the Button styles, that react to different props passed to it. For example if it is a link it will be an a-tag or if it’s a secondary Button it will look different.
The Final Evolution 👩🎤
Now the UI-Kit was the only part built in styled-components, for the application we still used CSS-Modules. When we tried to use styled-components, we suddenly got an issue with running multiple instances, so we made the seamless move to emotion.
style as a function of state. Contribute to emotion-js/emotion development by creating an account on GitHub.
Now the switch was easy, just a different import with saved us lots of trouble. This is what we are using now with a migration to emotion 10 soon.
Now how does our code look like when we write a component?
We are not using the object notation or the css prop. We are just writing css and exporting a styled component, so we then can reuse it across multiple parts of the app. This has proven to be very effective and increased our productivity . It also reduced the way we look at css classes and selectors differently as we do not need to worry about them at all anymore. Each div, each input is its own block that can be reused without any worries and in the worst case.
We are now more than 200 UI components in the Design System deep and we never had any issues with overriding styles due to the cascade or naming overlaps. Especially in a small team with Junior Devs, we can not afford to just trust that they don’t do things wrong, no matter how amazing they are.
For example a Navigation example:
This is much more readable to our team and easier to debug if we look at the React Dev Tools. One might like it or not, and that is fine 🤗
Now as a conclusion let’s be clear: this was our story and our path. I am still using CSS/SASS in other projects and I use and understand the new CSS features, that are amazing. But emotion-js just gives me so much more then that, composability and dynamic styling in different situations. The perfect mix, when building a complex application.
HTML/CSS gave me my first job while I was in middle school and I grew and evolved since then, so did my tools and my needs. And that is okay.
For more ramblings, follow me on Twitter 🐦! 👋🏽