Scope in CSS with and without JavaScript
summary
CSS is global by default but multiple concrete options let teams choose tradeoffs: using BEM or Sass partials gives BEM-like component conventions and needs discipline; atomic frameworks like Tailwind move styling into markup; CSS-in-JS (Styled Components) provides component scope by generating unique hashed class names at runtime and lets components change styles from props but adds bundle/runtime cost; Vue’s scoped attribute and CSS Modules scope styles at build time; a Gatsby + Drupal project shares Sass partials between builds and is working in practice.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 3:17CSS global scope explained
- 15:18CSS methodologies like BEM
- 21:34CSS in JS component scope
- 27:30Why can't we have both?
- 28:12Can regular CSS have scope?
- 32:08CSS modules approach
- 38:24Component-level separation
- 43:32Q&A session
