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.

This session will provide an overview of the various approaches to scoping CSS, both when using CSS alone, and when using CSS combined with JavaScript.

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

Next we’ll examine the various scoping approaches when using CSS in JavaScript, including:

• 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