Atomic Power: the Story of StyleX

Rate this content
Bookmark

A history of how code transformation has affected the industry. And how it led to changes in how we write CSS

This talk has been presented at React Day Berlin 2024, check out the latest edition of this React Conference.

FAQ

StylX is a tool for generating atomic CSS, maintained by Naman at Meta.

Early CSS lacked namespaces and variables, making it difficult to maintain and requiring repeated code.

CSS preprocessors like Sass and Less introduced features such as variables, nesting, and loops, improving CSS maintainability and functionality.

The community developed CSS modules and CSS in JS to address namespacing and scaling issues, with each approach offering different solutions and benefits.

Atomic CSS breaks styles into small, reusable pieces, maximizing reusability and scalability. It helps keep CSS size manageable as applications grow.

Tailwind CSS uses atomic styles to create a single small CSS file for the entire application, minimizing the need for lazy loading and improving performance.

While both generate atomic CSS, Tailwind works with almost any language and encourages repetition, while StylX is a JavaScript compiler that promotes reusability and is strongly typed.

React Strict DOM is a project that builds on StyleX to provide a common baseline for writing UI across web and React Native, offering web-like APIs that are not global.

Compilers have facilitated advancements in web development by enabling features like atomic CSS, improving performance, and enhancing developer experience.

Initially, web styling relied solely on HTML with limited capabilities like blink and marquee tags. CSS was later introduced to solve styling limitations, offering more power and reusability.

Naman Goel
Naman Goel
25 min
16 Dec, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Hello, I'm Naman and today I'm going to talk about atomic power and the story of StylX. CSS preprocessors like Sass and Less emerged to address challenges with CSS. In the evolution of CSS, there was a fork in the road with some moving towards CSS modules and others towards CSS in JS. Atomic CSS is about breaking styles into small, reusable pieces. Tailwind is a successful implementation of atomic styles. Stylix is a JavaScript compiler that generates atomic CSS and allows for defining styles once and reusing them. The speaker demonstrates the conversion of a design to Tailwind classes using Stylix. The TW function and parser in StyleX are discussed for defining constants and converting them into StyleX objects. Atomic CSS is a widely agreed concept and Tailwind can be used with StyleX. The React Strict DOM project is mentioned as a tool for writing UIs for web and React Native.
Video transcription and chapters available for users with access.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Build a Design System with React and Tailwind CSS
React Summit 2022React Summit 2022
27 min
Build a Design System with React and Tailwind CSS
Top Content
This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.
Rethinking CSS - Introducing Stylex
React Finland 2021React Finland 2021
25 min
Rethinking CSS - Introducing Stylex
Top Content
CSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers.
If You Were a React Compiler
React Summit US 2024React Summit US 2024
26 min
If You Were a React Compiler
Top Content
In this talk, the speaker aims to build an accurate understanding of how the new React compiler works, focusing on minimizing re-renders and improving performance. They discuss the concept of memoization and how it can be used to optimize React applications by storing the results of function calls. The React compiler automates this process by analyzing code, checking dependencies, and transpiling JSX. The speaker emphasizes the importance of being aware of memory concerns when using memoization and explains how the React compiler detects changes in function closure values. They also mention the Fibre Tree, which drives the reconciliation process and helps optimize performance in React. Additionally, the speaker touches on JSX transpilation, compiler caching, and the generation of code. They encourage developers to understand the code generated by the compiler to optimize specific sections as needed.
How to achieve layout composition in React
React Summit 2022React Summit 2022
8 min
How to achieve layout composition in React
This talk discusses achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, complex layouts can be achieved and reused across different components. The talk also covers the challenges of achieving complex layouts, such as card lineups, and provides solutions for maintaining alignment and responsiveness. The BedrockLayout primitive library simplifies web layouts and offers flexibility in composing layouts.
Type-safe Styling for React Component Packages: Vanilla Extract CSS
React Advanced 2023React Advanced 2023
19 min
Type-safe Styling for React Component Packages: Vanilla Extract CSS
Watch video: Type-safe Styling for React Component Packages: Vanilla Extract CSS
Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.
Moving on From Runtime Css-In-Js at Scale
React Summit 2023React Summit 2023
29 min
Moving on From Runtime Css-In-Js at Scale
Watch video: Moving on From Runtime Css-In-Js at Scale
This Talk explores the evolution of styling architecture, dynamic theming with style components, and optimizing style updates. It discusses the challenges of CSS migration and the choice between JavaScript and CSS native tooling. The Talk also touches on CSS tools and libraries, including Tailwind CSS and CSS in JS major libraries like MUI. The importance of picking a stack based on team members' strengths and the use of namespacing CSS for conflict-free dependency trees are highlighted.