BT

Facilitating the spread of knowledge and innovation in professional software development

Contribute

Topics

Choose your language

InfoQ Homepage News Facebook CSS-in-JS Solution Stylex Introduced at React Finland 2021

Facebook CSS-in-JS Solution Stylex Introduced at React Finland 2021

This item in japanese

Bookmarks

Naman Goel, software engineer at Facebook, recently presented Stylex at React Finland 2021. Stylex is Facebook’s custom CSS-in-JS solution used for the new facebook.com website. StyleX alleviates key pain points of CSS-in-JS for large React applications (unused styles, large CSS files, CSS-in-JS library size). Goel anticipates that Stylex will be open-sourced by the end of 2021.

In his Rethink CSS - Introducing Stylex talk at React Finland 2021, Goel explained that Stylex has a three-pronged goal: be fast, familiar, and flexible.

The first goal is achieved by compiling away CSS-related instructions found in source files into static CSS files. Developers — and users — thus are not paying the cost of the CSS-in-JS library, bringing Stylex in line with other static CSS-in-JS libraries such as Linaria. For comparison purposes, the popular CSS-in-JS library styled-components contains 13KB of (tree-shakable) JavaScript, part of which will have to be subtracted from the application budget. In order to improve the user experience, an increasing number of web applications follow the best practice consisting of limiting the quantity of JavaScript that has to be downloaded on pages’ first load.

As an example, Goel provides the following code using the Stylex library:

const styles = stylex.create({
  base: {
    position: 'absolute',
    top: 0,
    start: 0,
    end: 0,
    bottom: 0
  },
  active: {
    position: 'static',
  }
});

<div className={stylex(styles.base, isActive && styles.active}/>

That code leads to the following compiled CSS file:

.position-abs {
  position: absolute;
}
.top-0 {top: 0; }
.start-0 {left: 0; }
.end-0 {right: 0; }
.bottom-0 {bottom: 0; }
.position-st {
  position: 'static';
}

That CSS file associates with the corresponding HTML:

<div
  className="
    position-abs
    top-0
    start-0
    end-0
    bottom-0
  "
/>

To optimize the compiled CSS file, Stylex strives to remove unused styles and reduce the CSS file size by identifying atomic styles that can be reused instead of repeated. The style reuse allows to switch from a CSS file size that grows linearly with the number of components to one where the CSS file size reaches a plateau as more rules reuse kicks in:

CSS file size linear growth is broken through reuse of atomic CSS rules

Stylex also resolves style in a way that supports loading CSS bundles in random order without affecting the user interface. Goel illustrates how the user interface is affected by the order of CSS rules as follows:

How CSS rules order may affect the user interface

The previous illustration showcases how CSS specificity rules may result in different styles being applied depending on the order of the rules. To improve user experience, large applications may be divided into bundles that are loaded on demand and as necessary. The order of CSS rules will thus depend on the particular order in which bundles are loaded, which makes it impossible to guarantee a specific order ahead of time.

Goel further emphasized that Stylex allows style composition through React props:

Stylex style composition through props

Developers are invited to refer to the full talk presented at React Finland 2021. The talk contained plenty of code examples, illustrations that explain in detail the technical and design choices made by Stylex. React Finland 2021 took place online between the 30th of August and the 3rd of September.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT