Fluent UI React Insights: Styling

From the creator

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. 🔗 Links: - https://github.com/microsoft/fluentui - https://react.fluentui.dev/ 📚 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... 💡 References: - #1 An article about CSS specifity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity - #2 CodeSandbox that shows a dependency on order of imports https://codesandbox.io/s/white-paper-svwi8 - #3 Semantic UI homepage https://semantic-ui.com - #4 BEM homepage https://getbem.com - #5 CSS modules specification https://github.com/css-modules/css-modules - #6 Emotion.js homepage https://emotion.sh/ - #7 An issue in Emotion.js about performance hit when styles are used defined inside a component https://github.com/emotion-js/emotion/issues/1921 - #8 Fela.js homepage https://fela.js.org/ #fluentui #webdev #reactjs

Published 2022-08-22 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.