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

[@user-cd2zl3ty7x]

When we use css-in-js approach, js bundle will grow up. So for me better to use separate .scss file to write\overwrite styles.
I don`t see any issue if you will use BEM way including your own needed code style. BEM is not strict methodology, it`s just gives you some base rules that you may change for your needs
And yes, I`m using office-ui-fabric-react (because of 7th version) in my project

[@MiSt3300]

I always use CSS modules and if I need conditional styles I'll use inline styles that can be controlled with js

[@Magicman1-2-3]

Interesting

[@ODSD_EXCITEMENT]

Wow very disappointing to see Microsoft office go down this track of CSS and Dynamic languages. I'm sure there is a market for the technology; just very different from where we thought the technology was going.

[@LouisStAmour]

Outside of performance, why should Microsoft maintain two sets of UI components separately? And if Microsoft doesn’t build any components for the web, they will never properly compete with Google on web-based document editing.
I’m in favour of React and React Native UIs, at least I don’t have to learn that many new technologies, unlike XAML or WinUI that only partially adopted web technologies.
Okay, that last paragraph is a lie, I know that there’s a lot to learn for React, RN, and even CSS-replacements as was covered here. But it’s not new at this point, there are industry standards that Microsoft is following rather than entirely defining without working with others. This feels like the right approach to me as long as performance doesn’t suffer too much… :)