About the advantages of embedding CSS in JS

 
3r3-31.
3r3365. This post is a detailed answer to the questions from this conversation on twitter . The original author, Sunil Pie, is the author of the relatively popular library. glamor and works as a developer on Facebook. 3r366.
3r3394.  
How is jаvascript more convenient than CSS? How does writing CSS inside JS make it more supported?
I would be happy to talk on this topic. I’ll say right away that CSS-in-JS solutions have overhead, but usually this price is justified by the advantages they bring. Sometimes they can be useful, but it also does not mean that CSS-in-JS should be used always and everywhere.
type frameworks. Gatsby and 3r3335. Next
actively use this to improve performance in projects based on them. They embed critical CSS directly into downloadable HTML simply because it weighs so little that it will be better than an extra query blocking the page loading. This significantly reduces the time of the initial page rendering. Moreover, it also helps to solve problems of the size of the loaded jаvascript! The benefit comes from the use of critical CSS, as well as the use of dynamic import () 3r380. , separation code and remove unused code. (In contrast to the ever-growing legacy of style files, in which developers just add a new code, being afraid to touch the existing one. 3r3341. There are some analysts on this topic 3r3392 here.) 3r3394.  

A similar situation with the implementation of themes. Did you know that CSS Variables , even being a very interesting thing, they didn’t soar up to those usage scenarios for which they initially thought, but all because the fallback methods for old browsers turned out to be either very complicated or incomplete? This means that they are usually used as global constants, but very rarely as variables, the value of which is determined in the browser dynamically. Having runtime for working with CSS means that you can transfer values ​​from JS to styles, making it possible.

3r3394.  

In fact, you will like it: you can, finally, honestly use CSS variables in all browsers, that is, native features without runtime in browsers that support them, and a special runtime for older browsers. (I wrote 3r3357. Here is 3r-392. More on this, and - if I understand correctly - this is the only library that has achieved this).

3r3394.  

In a complex SPA situation with a bunch of components and asynchronous resource loading, such as scripts and styles, you cannot guarantee the exact order of loading styles, so either you have to create some runtime solutions to guarantee the order of styles, or just use 3r379. ! important 3r380. , even if you stick to some CSS methodology . For example, you have an item with class = “a b” but grades a and b defined in different style files, you cannot be sure of the final form of the block if you do not have a clear order of the style files. The Facebook codebase contains thousands of uses. ! important 3r380. even though the code was written by qualified programmers using the SOLID principles and good interaction with the design team.

3r3394.  

It often refers to handling CSS as if it were jаvascript - given that 10 years ago we solved similar problems for JS - libraries and modules registered themselves in the global namespace (3r379. $

and the like) and we had to be pretty attentive with the order of connecting scripts to HTML. But we are not stuck there forever - now we use modules, and the assembly systems sew them together in guaranteed guaranteed order. This happens simply and transparently for us.
3r3394.  
Watching real projects, I also noticed that you can still use traditional architectural approaches (such as OOCSS or SMACSS, etc.) in the world of CSS-in-JS - elements of those architectures are represented here as JS objects, instead of blocks, a selector + styles I adhere to this approach and it works for me well. Here You can read more about this.
3r3394.  
I am also well aware of the shortcomings of CSS-in-JS. In fact, this is why there is no single “canonical” library that represents CSS-in-JS - this is a range of different solutions, from vanilla static CSS on the one hand to fully dynamic libraries, such as 3r3391. styled-components
with another. Preprocessors such as SASS or LESS may appear perpendicular to this spectrum, because in theory they can be used by any of these libraries at the discretion of their authors. Each of these libraries has its drawbacks - some are engaged in extracting styles at the assembly stage so that there are no costs in runtime, some are focused on the correctness or convenience for developers, others are focused on the effective implementation of complex animations, and so on and so forth. This diversity is a natural reaction to the need for different solutions for different work tasks, in an overly rapidly developing industry. And this happens not only with libraries - web standards developers (ShadowDOM and others) are valiantly trying to solve these problems too, but their solution also has flaws, the least of which is that they are not everywhere available yet, which makes it unacceptable to use in a variety of teams.
3r3394.  
I used to have strong feelings about this, but I have moderated my views over the past few months. It turns out that the truth actually lies somewhere in the middle - it depends on the commands, requirements, time, documentation and many other factors. Moreover, I do not think that this text represents the “final form” of this idea. We need to encourage experiments in this area, so that we can find out what else we can do better, and even embed some of these things into browsers.
3r3105.
3r3102. ! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e. ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () ();
3r3105.
+ 0 -

Add comment