Why You Shouldn't Use Styled

Prologue

The css-in-js technology has been around for quite some time. Even at the beginning of my professional experience, I met approaches in which the styling of local parts of the interface was thrown into html through javascript in the form of css directives. Sometimes this is a necessary measure, although it happens occasionally, but once a year, as they say, and the stick shoots. In my experience, there was an example of building an interface section in which a modal window installed on the user’s site can be restyled through a code editor with live preview. css-in-js is sometimes justified, so I want to make a reservation right away – no approach is worth burying. But it is also not necessary to idealize it as a universal pill. Rendering styles tied to the logic of rendering components in the context of the entire project is just its own way with its own adventures, which, in my opinion, appeared in the general psychopathy to bind everything that is possible to the state. What if you look – where did this technology come from? To date, the react monopoly has formed on the interface design market, dictating its own rules of the game to programmers, and which, even without using the styled module, has a simple cssInJs control inversion.
React is an important character in this thread. It, like the useEffect of the entire modern front-end, has become the center of power, the focus of evil in the form of bare state management, which does not provide for anything else out of the box.

Rare Frame - Event Bus under React. I did not find anything like this in some more or less thoughtful solution in npm. — Rare Frame – Event Bus under React. I did not find anything like this in some more or less thoughtful solution in npm.

And what about the rest?
Let’s take the leader of a serious enterprise closest to react – angular. Their developers for the most part still prefer to use sass with bare methodologies (SMACSS / BEM) and for them cssInJs and passing control of style values remains at the level of experiments.

Your performance numbers

I will not conduct my experiments on measuring the speed of initializing the bundle and executing its individual functions in this article, firstly because I am too lazy, and secondly because it has already been done for me. I highly recommend to read the last link to all developers who hype on syled like mana from heaven.

reduced the weight of the bundle? mmwell done!

In fact, you don’t really need to measure anything to understand that styling tightly woven into react will take up part of the memory in the VirtualDOM and take up part of the processor time for all life cycle hooks to update its directives according to the current state. Here, cssInJs opposes itself to precompiled css, and not in the best light. After all, it’s one thing if the react rendered a class into an element and the styles already in memory were attached to the element, but it’s quite another if the react rendered the element’s styles, rendered the class, the browser initiated the styles and the styles were attached to the element.

The performance of the bundle dropping the user into the browser is not the only suffering figure. Build and update speed in the development runtime also has to be sacrificed, especially if typescript is used in conjunction with styled (with the exception of the latest version without the polling approach when rechecking the code).

My attitude towards styled

To begin with, I want to note the presence of createGlobalStyles in the styled module. And it is not surprising – you will not be fed up with local component styles alone. And given that styles are tightly tied to the life cycle of components, keeping global styles in them is a bad idea. The above function solves this problem, but still gets out of the composition, which is why I personally perceive it as a crutch.

findings

If you are very annoyed by the necessary insertion of directives from javascript that is out of the general picture of styles, for example, if colors from the server come and are applied to elements, etc. And you have a lot of such fun in your project – styled is perfect for the same projects. If in the project all styling is initially known, there are no such perversions – I will choose SASS.

But no matter which way I go – just give me the will – I and there and here twist tailwind =)