DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Fluent UI Insights EP3: Griffel
Paul Gildea
Paul Gildea

Posted on

Fluent UI Insights EP3: Griffel

Fluent UI Insights is a series that describes the design and decisions behind the Fluent UI design system.

In the third episode, Oleksandr from the Fluent UI team explains the implementation details and complexities behind Griffel. Griffel is a CSS-in-JS used in Fluent UI React v9 and features ahead-of-time compilation.

In this video he covers:

  • Requirements for styling solution
  • Important concepts of Atomic CSS-in-JS
  • Creating Griffel CSS-in-JS
  • Did it all magically go smoothly? Find out more!

Checkout the CodesandBox from the video that demonstrates LVFHA order importance:

As always let us know what kind of content you want see from Fluent UI React by visiting us on:

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!