CSS is global by nature. This is a powerful feature of CSS that can allow you to create consistent styling throughout your site with small amounts of code. But increasingly there are cases where front-end developers want to instead scope their styles to a specific component and ensure that component styles don’t impact other areas of the site.
Starting from the perspective of CSS only approaches we’ll look at:
- A brief review of CSS Inheritance, specificity and the Cascade
- Scoping with BEM and other CSS methodologies
- Atomic or Functional CSS
- Potential advantages and disadvantages to CSS-in-JS
- React CSS-in-JS libraries including Styled Components
- Component styling using single file components in Vue
- Scoped styles using CSS Modules
Finally, we’ll wrap up by looking at a few ways that global and scoped CSS can be used together effectively.
- Approaches to using both global and scoped CSS when using CSS-in-JS
- Ways to share styles between ’traditional’ styling and CSS-in-JS approaches
- Web Components and the future of CSS scope
Brian is a versatile developer with experience building complex, interactive web applications in support of large-scale localized sites. Recently he has focused his efforts on evolving Drupal front-end development practices, decoupled Drupal, and style guide development techniques and has spoken on the topic at various Drupal events. Brian is a Drupal 7 and Drupal 8 Acquia Certified Grand Master and loves all things Nintendo.