Skip to main content

Introduction to StyleX

StyleX is a simple, easy to use JavaScript syntax and compiler for styling web apps.

StyleX combines the strengths and avoids the weaknesses of both inline styles and static CSS. Defining and using styles requires only local knowledge within a component, and avoids specificity issues while retaining features like Media Queries. StyleX builds optimized styles using collision-free atomic CSS which is superior to what could be authored and maintained by hand.

Features at a glance​

Scalable

Scale new heights without bundle sizes weighing you down

  • Minimize CSS output with atomic CSS
  • The CSS size plateaus even as the number of components grows
  • Styles remain readable and maintainable within growing codebases

Predictable

You shouldn't need a crystal ball to know how an element is styled

  • All styles are applied as class names applied directly on elements
  • No specificity issues
  • “The last style applied always wins!”

Composable

Merging styles shouldn't feel like a puzzle

  • Apply styles conditionally
  • Merge and compose arbitrary styles across component and file boundaries
  • Use local constants and expressions to keep your styles DRY
    • Or repeat yourself without worrying about performance

Fast

Dynamic at the speed of static, because it is static

  • No runtime style injection
  • All styles are bundled in a static CSS file at compile-time
  • Optimized runtime for merging class names

Type-Safe

More safety than just your eyes

  • Type-safe APIs
  • Type-safe styles
  • Type-safe themes

Ideal conditions for using StyleX?​

StyleX works well in a wide variety of projects. However, there are some conditions that are more ideal for using StyleX than others.

When authoring your UI in JavaScript​

StyleX is a CSS-in-JS library, which means that it is most useful when an app's UI is authored in Javascript. If an application uses a framework like React, Preact, Solid, lit-html, or Angular, using StyleX should be a good fit.

Some frameworks, such as Svelte and Vue use custom file formats that are compiled to JavaScript at build time. StyleX can still be used in these frameworks, but may need some custom configuration.

Large or growing projects​

While StyleX works well for projects of all sizes, it really shines in larger applications.

Since StyleX compiles to atomic class names, a big performance benefit is that the size of your CSS bundle plateaus as your project grows.

Reusable components​

The benefits of StyleX are greatest when used alongside reusable UI components.

For years, we have had to choose between "Design System" components that come with styles baked in but can be difficult to customize or "Headless" components that are completely unstyled.

StyleX empowers developers to build UI components that can have default styles and still be customizable.

Further, the consistency enables sharing these components by publishing them to NPM. As long as the consumer of a component is also using StyleX, the styles will be merged and composed correctly without any additional configuration.