WARNING: CSS in JS is the Future
Let’s overcome the limitations of CSS once and for all.
The last big battle in the front-end development is being fought in the styles and will end with the CSS (Cascading Styles Sheet) as we know it.
CSS, as such, was born back in 1995 when the web consisted of simple documents. But much has happened since then. Complex and interactive user interfaces form websites today, and traditional CSS encounters many limitations in them, especially when it comes at stake the philosophy of components.
The first of these limitations is the isolation of the styles since first of all we do not have an easy and intuitive way to manage to organize our styles without affecting each other. In fact, organizing CSS at medium / large scale is quite complicated. I would even dare to say that it is one of the most complex problems facing front-end programmers today. That is why, historically, there have been multiple alternatives to solve it, such as OOCSS, SMACSS and, probably the best known of all, BEM. However they are conventions, none prevents you from misusing them or definitively solving the problem.
The second drawback would be how limited CSS is since it does not allow you to create variables or functions to reuse code. That’s why we started using alternatives such as LESS or SASS, to enrich it with those features that we all love.
But the last major limitation we encountered (and also the most hated by all) would be its compatibility between browsers. Each interprets and implements the specification as it pleases. And of course, then you have to make sure that everything looks good in all browsers. Knowing the interpretation that each browser gives to the specification did not seem perfect idea.
So that’s why we first try to fix it with SASS mixins, but we knew we could do much better, to the point of doing away with this concern thanks to Autoprefixer, which is responsible for remembering all that information for us. Interestingly, it is possible thanks to PostCSS, which is nothing more than a tool that processes our CSS with JS.
Although before we start talking about the advantages of using CSS in JS, let’s see what it is not:
- CSS in JS is not inline styles, that’s called inline styles, and it’s something else.
- CSS in JS does not mean to stop learning CSS, although it hurts some, you’ll have to keep knowing how CSS works, and even more, I think we’ll still need to know CSS for a long time since it does its primary function very well, giving styles to our interface.
- CSS in JS does not mean that your web will lose the styles if you deactivate the JS of the browser because we will continue generating standard CSS.
Let ‘s see what CSS in JS means. It means using JS to solve all the deficiencies that CSS has and to fit the last piece of the web puzzle, the styles, in the JS and the component philosophy.
Component philosophy? Last piece of the web puzzle?
After years of evolution of the front-end development, all the solutions (frameworks) that have appeared (Angular, React, Vue, Ember) are based on components. This is not the result of any conspiracy, but the consequence that this is the most logical way of creating interfaces: Treating them as small independent units that are used to compose more complex ones.
But the last frontier that prevented us from doing it efficiently, after the absorption of the DOM by JS (with React and JSX), is CSS. Having CSS hosted in another technology makes it more complicated to integrate it into our components and slow down the evolution of the ecosystem.
Yes, well, but I do not like frameworks, I just want to layout.
It seems very good to me, but at some point, I am sure that you will have to understand the JS, or will you never develop apps that go beyond layouts?
That’s why CSS in JS means only to write the same CSS that you do now in a JS file, actually, the syntax is the same. The only thing that disappears is the .css files as we know it and as a gift, you will take the following:
- Isolated styles, you will not have to worry about the name of your classes or if there will be conflicts with others. We will have wholly isolated components ready to be used anywhere in our application or applications.
- All the power of JS to create variables, functions, make imports … Also, unlike preprocessors, you can use it in both CSS and JS.
- Among other things, using the JS imports will allow us to optimize the size of our CSS and make “lazy load” (load only the minimum necessary CSS).
- We can share CSS through NPM in a more straightforward way, by getting our CSS to be JS we can also take advantage, more efficiently, of the power of NPM and I am sure that this will lead to a faster evolution of the entire CSS ecosystem.
- Bringing the DOM to the JS has achieved something that many people are still not aware of, that we can write code once and transform it into solutions for web, mobile or even sketch. Taking the CSS to JS will make obtaining a universal language to give styles much easier, and we can use the same syntax for any rendering, even PDF or new formats that might appear.
I will not talk about the different solutions that there are to use CSS in JS because they are so many and everything is continually evolving. Anything I address will undoubtedly be overcome in a few months. But I do want to make a final reflection:
From the moment we adopt philosophies such as BEM and add technologies such as SASS we are already admitting that CSS has many shortcomings, using CSS in JS is nothing more than the natural evolution to solve them more efficiently and universally.
Honestly, you are not helping yourself out if you don’t adopt this evolution because for fear or ignorance of the unknown. In my opinion, CSS in JS is not a whim or a fad, it is a logical evolution, and it is inevitable.
I open the debate, and I await your comments, do you think that .css files will disappear in favor of the JS or not?
