Video Tutorial Why CSSinJS


In this video I invite you to discover the principle of the CSSinJS

What is that ?

Before starting it is important to define what the CSSinJS and how it differs from the "traditional" way of doing CSS.
As the name suggests, the goal is to generate CSS rules from JavaScript.

function Box ({padding, children}) {
  return (
    
{children}

  )
}

At first glance, we can say to ourselves that this amounts to using the attribute style of the element, but the CSSinJS library will instead generate one (or more) CSS rules that it will then inject into the header of the page.

My text

Why ?

Now we may wonder why use this approach, rather than the classic approach of creating rules in CSS by linking to HTML via selectors.

Limit the scope

The first objective is to make it possible to group everything (style & function) in one place while avoiding that the style spills over onto the rest of the elements.

By automatically generating the names of the classes, the CSSinJS will make it possible to limit the scope of the rules and also make it possible to ask less questions about the naming conventions.

Loading on demand

Now that the style is linked to the element, it is easier to split up the loading of the style and ensure that if an element is not loaded its style is not loaded either. This makes it possible not to load a large style sheet which may contain selectors for elements which are not present on the page (often at the cost of an additional cost at runtime)

A more predictable composition

Another problem solved by the CSSinJS is composition. When an element has several classes, the styles are not applied according to the order of the classes but according to the order of the declarations (and the specificity of the selectors).

Under these conditions it can be difficult to anticipate (and organize) the style of certain elements. When working with objects this problem is eliminated because the order of the parameters will take precedence over the rest.

const styles = {
  bgBlue: {background: 'blue'},
  btn: {color: '#FFF', background: 'red'}
}

Generation in JavaScript

Finally a last advantage is the possibility of taking advantage of the JavaScript ecosystem to generate our styles.

const styles = {
    background: opacify (COLORS.white, 10)
    position: 'absolute',
    ... inset (0)
}

A new approach with new problems

Even if everything that we said previously seems interesting, it is important to also see the compromises to be made by adopting this new approach in order to choose the right tool according to the situation.

An execution cost

The generation of the classes and the injection of the style has a cost which will be added during the rendering of each of your components. It will also require more work at the browser level which will see the style rules applied to the evolved page throughout the life of your application (browsers have become very good at optimizing the loading of a classic CSS style sheet) .

No standard

The CSSinJS approach is implemented by several libraries which all offer different approaches and functions (and there are already a lot of them!). We will then have a development base that will be less stable and more scalable than the CSS standard with these selectors.
In addition to that, many of these tools will depend on a particular library or framework. For example, we will not do CSSinJS in the same way depending on whether we are working with VueJS, Svelte or React.

Server-side rendering

The problem of server-side rendering also arises in many CSSinJS implementations. Some of these libraries extract the style in a tag

RELATED ARTICLESMORE FROM AUTHOR