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

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.

Episode source