Styling for the web is pretty much a one solution approach. CSS. No matter how you look at it, that is the only language that has the ability to apply styling and theme our web sites and applications alike. However, despite having only one possible output, there are many ways to get to it today. The main two most are familiar with being preprocessors(LESS and SASS) and JS. In this article, we’re going to focus on JS.
So in JS, there are a couple of different avenues to achieving this and they ultimately end up with the same result. We’re not going to get fully into the details today, but we will do a nice dive in showing the benefits of using JS to render your CSS to the DOM. As well as give insight into having a healthy balance of traditional CSS and CSS-In-JS.
Benefits of Traditonal CSS
Before going into CSS-In-JS, it’s only right to take a step back and look at all the great benefits of our old friend traditional CSS. Because in truth, in most cases, there is very little reason to completely remove traditional CSS files from your projects. Let’s get into it!
Creates Standard Style Baseline
Having a traditional CSS file in your project can be viewed as a baseline or safety net. This is great because it ensures a level of quality to act as a fallback or a place to hold the majority of general use style rules. As an example, think of Bootstrap or Foundation. Libraries like these provide a standard baseline for our projects, and we build on top of them. Just like how we should view all traditional CSS for our projects.
CSS variables are great, and I’ve expressed this vividly before. Having a traditional CSS file that has all the standard values you’ll use hosted there gives a great sense of insurance and they are highly accessible. No matter the access point being CSS generated from JS or other CSS files loaded as well.
Benefits of CSS-In-JS
Traditional CSS is awesome, and will continue to be a cornerstone for web technologies for as long as the web is around in my humble opinion. However, I do see CSS-In-JS as an enhancement of it. As you get familiar with CSS you understand that there are some things it lacks for the current nature of the front end tech stack. In those gaps, you’ll find perfect use of CSS-In-JS.
Because CSS is being loaded and generated from JS, it allows for on the fly customization. For example, say you have a component(or component library) where the goal is to make it as extensible as possible. Traditionally, you’d package all your JS and CSS together and the different projects it is inserted into would just overwrite the default styles with identifiers(individual or from the parent element) or just changing the source code itself.
With CSS-In-JS however, that is no longer needed. This is so because when built correctly with this approach, a developer consuming this component can pass in variables for the optional style variables. Much easier right!
Think of a project where you hold all your CSS in a traditional file, or set of files. No matter if the element with style definitions is present in the DOM or not, the styling is still present. With CSS-In-JS that doesn’t have to be the case.
This is so because you can write your code in a way that if at least one instance of an element is present in the DOM then it will be there. If not, then remove it and add it back once one instance or more is present. Self-cleaning and tracking!
Separation of Concerns
All the main benefits of CSS-In-JS ultimately cumulates into this one reason for me. Simply put, as stated earlier in the article, baseline styling and common use variables, in a traditional CSS file. Making all the general use, and common amongst all components, styles loaded from flat CSS file makes the most sense. Everything else, CSS-In-JS is a clear winner.
I don’t want this article to feel like this is a competition between the two technologies. Both approaches are great and have their own unique value that doesn’t undermine the other. It is when you combine both approaches you get the best of both in my opinion. So for your next project do keep that in mind, and build the best performing and scalable projects you can!