Fluent UI React Insights: Styling

Fluent UI Insights is a series that describes the design and decisions behind the Fluent UI design system. In the second episode, engineers from the Fluent UI team explain issues related to styling UI controls by sharing the requirements and also describing problems with existing solutions.

Chapters

• 00:00 - Introduction
• 00:30 - CSS?
• 01:44 - CSS specificity
• 06:47 - BEM, CSS, CSS-in-JS
• 12:30 - State of things
• 13:32 - Not the end...

Recommended resources

• https://github.com/microsoft/fluentui
• https://react.fluentui.dev/
• An article about CSS specificity
• CodeSandbox that shows a dependency on order of imports
• Semantic UI homepage
• BEM homepage
• CSS modules specification
• Emotion.js homepage
• An issue in Emotion.js about performance hit when styles are used defined inside a component
• Fela.js homepage