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
Lead Front End Developer @ Bounteous
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.