A presentation at Florida Drupalcamp 2020 in in Orlando, FL, USA by Brian Perry
CSS is global by nature. Given the name, style sheets are intended to cascade and a single CSS rule could apply to multiple elements on your site. 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 are consistent and don’t impact other areas of the site.
Starting from the perspective of CSS only approaches we’ll look at:
Finally, we’ll wrap up by looking at a few ways that global and scoped CSS can be used together effectively.
The following resources were mentioned during the presentation or are useful additional information.
The following code examples from the presentation can be tried out live.