Fluent UI React Trainings: Styling best practices and icons

This tutorial covers two distinct topics. The first topic goes through some of the best practices of using the Griffel CSS-in-JS with or without Fluent UI components. We will learn about common development patterns when using Griffel and the best way to implement them. The second topic is a more advanced deep-dive into the different icon variants that we have in Fluent UI and how to use them effective.
Chapters:
00:00 - Intro
00:11 - Styles handbook
01:00 - Griffel runtime styles limitations
01:12 - Incorrect styling example
02:03 - Enumerate all style combinations
03:17 - Inline styles
03:52 - Inline CSS variables
05:19 - Structuring style definitions
07:09 - Design tokens and themes
09:22 - Don't use !important
11:38 - Nested combinators
16:37 - Icon recap
17:25 - Regular and filled icon variants
18:05 - Bundling icons
19:31 - Toggling icon variants on hover
20:17 - Fluent UI component icon handling
21:15 - Outro
📝 Examples:
#1 Runtime styling stackblitz.com/edit/vitejs-vi...
#2 Tokens over direct colors stackblitz.com/edit/vitejs-vi...
#3 Avoid important stackblitz.com/edit/vitejs-vi...
#4 Using nested selectors stackblitz.com/edit/vitejs-vi...
💡 References:
#1 Styles handbook github.com/microsoft/fluentui...
#2 Limitations in Griffel griffel.js.org/react/guides/l...

[@cintron3d]

Hadn't thought about how combinator selectors hurt performance before. Great point. Just one more reason why I love atomic css like Tailwind.

[@svdoever]

Link to styles handbook is not working, also can't find it in the repository...