CSS, Design Systems & Developer Experience

on YouTube ↗16m

" summary

Claims that a design system can make CSS scalable and performant get tested with concrete choices: GitHub moves from many utility class names to a React library called primer components (over 30 components) to stop bundle growth, reduce custom CSS, and encapsulate styles. The implementation uses styled-components and styled-system, a theming scale, and a “flexibly strict” API; a later refactor accepts a little duplication and improves readability. Results: fewer bespoke styles, easier cross-repo updates, and predictable theming.

AI-written summary · about

" chapters (5)

1. 0:00Intro
2. 1:00CSS is hard
3. 3:25Design Systems
4. 5:07CSS
5. 8:12Primer Components

" related talks

• 32mDesign System APIs and the Developer ExperienceDiana Mounter · Design Systems London 2018
• 34mCSS in ReactJoe Seifi · Reactathon 2018
• 47mThe road to styled components, and the road aheadGlen Maddern · ReactFoo 2017
• 22mStyled ComponentsMax Stoiber · .concat() 2018
• 31mWhat goes into building a design systemSid · React Live 2019
• 31mThe road to <💅> styled-components" CSS in component-based systems"Max Stoiber · React London 2017
• 12mDesign Systems-Revamping Products for Consistent UIsTaley'a Mirza · React Summit Remote Edition 2021
• 30mDynamic Styling Systems with ReactKhachatur Virabyan | ReactConfAM19 · React Conf Armenia 2019