Episode 133: How to Design CSS for Design and Performance with Nicole Oliver
52:46 Share

Recording date: April 1, 2021

John Papa @John_Papa)

Ward Bell @WardBell)

Dan Wahlin @DanWahlin)

Craig Shoemaker @craigshoemaker)

Nicole Oliver @Nixallover)

Brought to you by

- AG Grid)

)

- Nrwl)

Visit nx.dev) to get the preeminent open-source toolkit for monorepo development, today.

)

Resources:

• Nrwl on Twitter)
• Nicole on Web Rush episode 0027 talking about TypeScript decorators)
• Nicole on Web Rush episode 0057 on Styling Modern applications)
• CSS (for those who ignore it))
• Nx Developer tools)
• Rubik’s cube)
• What are CSS Design Tokens)
• Angular Playground)
• Angular Playground Visual Regression Utility)
• Figma)
• Storybook)
• Storybook Visual Regression Testing)
• Visual Regression Testing)
• PurgeCSS)
• Optimizing CSS for Production)
• UnCSS)
• Addy Osmani talking about purging CSS)
• Find unused CSS with Chrome dev tools)
• Angular Material CDK)
• Bootstrap)
• Bulma)
• Tailwind CSS)
• Funny Terrible UI Experiences)
• User Inyerface is another fun example)
• On Running)

Timejumps

• 00:49) Battleship grey
• 02:25) Guest introduction
• 04:30) Decorating with CSS
• 06:05) CSS Performance
• 06:56) Sponsor: Nrwhl
• 07:36) Why care about the size of CSS?
• 13:18) How do you gather elements when starting a new project?
• 20:23) Do you create UI books or standards?
• 21:56) The story of storybook
• 25:27) One single CSS or multiple CSS files?
• 32:31) How do you decide when to put something in global vs components?
• 34:27) Sponsor: Ag Grid
• 35:32) Orphan styles
• 43:29) Some of the tools to use
• 47:18) Final thoughts

Podcast editing on this episode done by Chris Enns of Lemon Productions).