Css style

Facebook’s CSS-in-JS approach – Frank Yan at React Conf 2019

Frank Yan discussed at React Conf some of the technologies and strategies that power FB5, the new facebook.comcovering topics such as Facebook’s approach to CSS-in-JS.

The Facebook website started out as a simple PHP web page. As richer and more interactive features such as messaging and live video were added to the platform, the stack grew in complexity to include a combination of CSS, vanilla JavaScript, Flux , React, and Relay, with a negative impact on page size and performance. To create the user experience they needed for their products, Facebook decided to rebuild from the ground up with the following requirements: a modern design system with theming support, improved accessibility, faster page loads fast and seamless interactions. Facebook’s new website is a one-page application with a React/GraphQL/Relay stack.

Given Facebook’s specific constraints, he decided to create his own CSS-in-JS library. The idea behind it was not to reject idiomatic CSS, but to make it easier to maintain and retain the good parts of CSS that developers are used to enjoying. The number one priority was readability and maintainability, which are compounded issues on a large scale. Yan gave a sample code showing the CSS-in-JS version of Facebook in action:

const styles = stylex.create({
  blue: {color: 'blue'},
  red: {color: 'red'}
});

function MyComponent(props) {
  return (
    <span className={styles('blue', 'red')}>
      I'm blue
    span>
  )
}

In the previous examples, CSS specificity issues that can lead to unpredictable styling are eliminated; the last style to apply (red) will be in place.

One of the first things the designers asked for was dark mode. To implement the theming capabilities, the Facebook team used CSS variables, also known as custom css properties. CSS variables propagate their values ​​into the element subtree in the same way as React Context, which led to replacing the use cases of Context to persist theme-bound values ​​with the use of a native browser functionality. Instead of sending SVG files to img tags, SVG icons were passed as React components, allowing the icon to be customized according to theme. Icons can therefore change color at runtime without requiring additional downloads.

In terms of accessibility, font sizes have been changed by a fixed pixel (px) based on a proportional-size-font rem based.

Because styles are embedded in JavaScript files, JavaScript tools can be used to perform checks, whether static checks (like checking the type of style objects or fluff) or execution. In the Facebook development environment, if certain elements seem inaccessible or incompatible with dark mode, or slow to appear, developers can visibly and functionally block them and receive actionable recommendations to resolve the detected issues.

From the style rules provided in the JavaScript files, atomic CSS files are generated, in which each class references a CSS property/value pair. For example, the preceding code example might lead to the following CSS declarations:

.c0 { color: blue}
.c1 { color: red}

These CSS declarations can then be reused wherever developers use a blue or red color. Reuse combined with short names reduces the size of the generated style sheet but also breaks the observed linear growth pattern between CSS file size and features. Yan mentioned that the CSS file size has been reduced from 413 KB to 73 KB, while still including the dark mode implementation.

Other optimizations may apply. Yan showed how a stylex The style declaration disappears when constant CSS properties are replaced in component code with their values, eliminating much of the runtime cost of using the CSS-in-JS library, while maintaining compatibility with server-side rendering.

The described CSS-in-JS approach is reminiscent of the library Atomic CSSwhich relies on one-time style units, the runtime-less CSS-in-JS library Linaria, and The Facebook prepacka JavaScript bundle optimizer.

Yan’s full speech is available on the ReactConf site and contains more code snippets and detailed explanations. Respond to the conference is the official Facebook React event. React Conf took place in 2019 in Henderson, Nevada on October 24-25.