Are you scared of your CSS? Did your site's CSS grow from a small bundle into a gigantic monster with flailing arms tattooed with ".view-id-articles .views-row .node-type-article"? If you tried to refactor using component-based design, you likely couldn't discover which old rulesets could be safely deleted.

Building proper CSS components in Drupal is hard. And Drupal 8 does not provide any good examples of how to build them.

Surprisingly, CSS-in-JS projects offer many good lessons we can use in Drupal. While early CSS-in-JS projects used JavaScript objects to inject inline styles into HTML, the newest CSS-in-JS projects help solve thorny front-end problems, including:

Preventing unused CSS
Creating accurate component structure with no effort
Scoping styles to local HTML instead of globally
Preventing styles bleeding to nested components
Discovering critical CSS
Separating concerns: splitting data preparation from markup/styles
In this session, we'll investigate examples of styled-components, a recent React-based project, and discuss how to get similar results using Twig in Drupal.

Attendees will only need very basic JavaScript and Twig knowledge.