Scoping CSS With and Without JavaScript
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.
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 and the Cascade
Scoping with BEM and other naming methodologies
Atomic or Functional CSS
Next we’ll examine the various scoping approaches when using CSS in JavaScript, including:
Scoped styles using CSS Modules
React CSS in JS libraries including Styled Components and Emotion
Component styling in Angular and Vue
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 JavaScript.
Ways to share styles between ’traditional’ styling and CSS in JS approaches.
Slides: https://noti.st/brianperry/FHZ3yQ/scope-in-css-with-and-without-javascript
Speaker
BrianPerry
Bounteous
Lead Front End Developer
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.
https://nedcamp.org/sessions/2019/scoping-css-and-without-javascript
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 and the Cascade
Scoping with BEM and other naming methodologies
Atomic or Functional CSS
Next we’ll examine the various scoping approaches when using CSS in JavaScript, including:
Scoped styles using CSS Modules
React CSS in JS libraries including Styled Components and Emotion
Component styling in Angular and Vue
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 JavaScript.
Ways to share styles between ’traditional’ styling and CSS in JS approaches.
Slides: https://noti.st/brianperry/FHZ3yQ/scope-in-css-with-and-without-javascript
Speaker
BrianPerry
Bounteous
Lead Front End Developer
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.
https://nedcamp.org/sessions/2019/scoping-css-and-without-javascript