Sign in to confirm you’re not a bot

This helps protect our community. Learn more

Sign in

Fluent UI React Insights: Styling

Microsoft Developer

Microsoft Developer

Verified

588K subscribers

<__slot-el>

Subscribe

<__slot-el>

Subscribed

115

Share

Save

9.3K views 2 years ago #reactjs #webdev #fluentui

9,357 views • Aug 22, 2022 • #reactjs #webdev #fluentui

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

 …...more

...more

Comments 6

Top comments

Newest first

Chapters

Introduction

0:00

CSS?

0:30

CSS specificity

1:44

BEM, CSS, CSS-in-JS

6:47

State of things

12:30

Not the end...

13:32

Sync to video time

Description

Fluent UI React Insights: Styling

115Likes

9,357Views

2022Aug 22

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/d...
• #2 CodeSandbox that shows a dependency on order of imports https://codesandbox.io/s/white-paper-...
• #3 Semantic UI homepage https://semantic-ui.com
• #4 BEM homepage https://getbem.com
• #5 CSS modules specification https://github.com/css-modules/css-mo...
• #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...
• #8 Fela.js homepage https://fela.js.org/

#fluentui #webdev #reactjs

Chapters

View all

Introduction

0:00

CSS?

0:30

CSS specificity

1:44

BEM, CSS, CSS-in-JS

6:47

Transcript

Follow along using the transcript.

Show transcript

Microsoft Developer

588K subscribers

Videos

About

Facebook

14:19

Fluent UI React Insights: Positioning

by Microsoft Developer

Transcript

15:10

Now playing

Fluent UI React Insights: Griffel

Microsoft Developer

Microsoft Developer

Verified

•

4.9K views 2 years ago

18:07

Now playing

The Real Reason Windows is Free - And what that costs you!

Dave's Garage

Dave's Garage

Verified

•

471K views 5 days ago

New

11:37:46

Now playing

CSS Full Course Tutorial for Beginners - Learn EVERYTHING You Need to Know in Detail 🔍 Part 1 of 2

Future Fullstack

Future Fullstack

•

140K views 4 months ago

33:24

Now playing

New CSS features to know for 2025

Kevin Powell

Kevin Powell

Verified

•

36K views 7 days ago

10:59

Now playing

🚨Maddow CRACKS UP After Revealing SECRET MUSK RECORDING

Occupy Democrats

Occupy Democrats

•

1.1M views 7 hours ago

New

18:43

Now playing

Houthis ATTACK the Wrong U.S. Fighter Jet – Then THIS Happened…

Navy Media

Navy Media

•

2.5M views 4 days ago

New

32:26

Now playing

This Toy Carved The Nicest Table I've Ever Made.

Fortress Fine Woodworks

Fortress Fine Woodworks

Verified

•

3.4M views 12 days ago

41:34

Now playing

Why Can't We Make Simple Software? - Peter van Hardenberg

Handmade Cities

Handmade Cities

•

286K views 4 months ago

8:21

Now playing

Buttigieg becomes NIGHTMARE for Trump with unexpected move

Brian Tyler Cohen

Brian Tyler Cohen

Verified

•

232K views 4 hours ago

New

13:30

Now playing

Trump’s Unhinged Easter Post, More Hegseth Hypocrisy & Pope Francis Meets JD Vance Before Passing

Jimmy Kimmel Live

Jimmy Kimmel Live

Verified

•

2.9M views 1 day ago

New

14:46

Now playing

CSS Battle - Re-create an Image with CSS in the Fewest Characters | Experts Compete in CSS Code Golf

Syntax

Syntax

•

114K views 1 month ago

27:40

Now playing

The Biggest Misconception in Physics

Veritasium

Veritasium

Verified

•

5.9M views 9 days ago

3:11:18

Now playing

Richard Wolff: Trump, Hitler, and the End of the American Empire

Robinson Erhardt

Robinson Erhardt

•

1.9M views 10 days ago

46:15

Now playing

All 12 useState & useEffect Mistakes Junior React Developers Still Make in 2025

ByteGrad

ByteGrad

Verified

•

1.1M views 1 year ago

12:59

Now playing

8 Rules For Learning to Code in 2025...and should you?

Travis Media

Travis Media

Verified

•

524K views 4 months ago

21:26

Now playing

Fluent UI React Trainings: Styling best practices and icons

Microsoft Developer

Microsoft Developer

Verified

•

4.5K views 1 year ago

22:51

Now playing

Fluent UI React Trainings: Styling components & theming

Microsoft Developer

Microsoft Developer

Verified

•

5.3K views 1 year ago

22:36

Now playing

Why Pantone Colors Are So Expensive | So Expensive | Business Insider

Business Insider

Business Insider

Verified

•

1.6M views 4 days ago

New

8:24

Now playing

Trump ‘just wants to be friends with Putin again’ | John Bolton

Times Radio

Times Radio

Verified

•

76K views 6 hours ago

New

33:45

Now playing

Why It Was Almost Impossible to Make the Blue LED

Veritasium

Veritasium

Verified

•

32M views 1 year ago