An Introductory Look into StyleX

Earlier this month, Meta open-sourced their system for styling web applications. Named StyleX, this system powers the CSS for most of their public-facing properties, including Facebook, Instagram, WhatsApp, and more.

How does it work?

StyleX is a CSS-in-JS system designed to be used in applications built with front-end JavaScript frameworks like React. Styles are defined in the same location as markup and compiled with the rest of the application. This is nothing new. Other CSS-in-JS systems have existed for a while but tend to bring performance drawbacks due to how the styles are injected at runtime. This is where StyleX differs from the competition; instead, it compiles the resulting styles into a standalone CSS file that can then be loaded on the site like a regular stylesheet.

Why use StyleX?

When using a compatible front-end JavaScript framework, the approach taken by StyleX has several apparent benefits.

Encapsulation

StyleX allows the enforcement of encapsulation, a core principle of object-oriented design. Unlike traditional CSS, defined styles apply only to the element they are applied to. This allows for higher predictability when determining which style will win in a conflict. Combined with defining the styles in the same location as the markup, UI components can be entirely self-contained with a set of default styles and precise control over which styles can be changed or overridden.

For example, if your project uses StyleX and you import a library that also uses StyleX, the styles associated with that library’s components can be seamlessly merged with your existing project while still allowing overrides to suit your theme. If there are styles that are core to that component’s functionality, the author can explicitly disallow those styles from being overridden.

Atomic CSS without the drawbacks

Atomic CSS is a popular approach due to how efficient the resulting stylesheet can be. However, this often comes with drawbacks when it comes to implementation. An example of this would be Tailwind, one of the most popular frameworks for Atomic CSS. Tailwind is efficient when it comes to file size, but works very differently from traditional CSS, resulting in a steep learning curve for the uninitiated. It can also become difficult to read when many styles are applied to the same element. StyleX gives the best of both worlds, keeping styles closely linked with the related markup and compiling to an efficient atomic CSS stylesheet while keeping them organized like traditional CSS within the source code.

Simple API

StyleX is designed to be easy to learn, leveraging standard JavaScript design patterns wherever possible. Although there do exist more functions to handle more complicated styles, most of the system can be boiled down to two primary functions:

1. stylex.create() // Define styles

2. stylex.props() // Apply styles to elements

This can be seen in the example below:

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
    base: {
        fontSize: 16,
        lineHeight: 1.5,
        color: 'grey',
    },
    highlighted: {
        color: 'rebeccapurple',
    },
});

// Single style
<div {...stylex.props(styles.base)} />

// Multiple styles
<div {...stylex.props(styles.base, styles.highlighted)} />

This approach allows anyone with an understanding of JavaScript & CSS to grasp how to use it quickly and minimizes the time spent on simply learning how the system works.

Conclusion

Based on their documentation and general approach, StyleX is a promising system for handling styles within JavaScript-based UIs. The system addresses some of the main concerns with Atomic CSS while keeping what makes it appealing. It will be very interesting to see where Meta takes StyleX from here.

Image Credit: Adobe Firefly