CSS-in-JS: unexpected lessons for Drupal component design
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.
Slides are available at https://www.slideshare.net/JohnAlbin/cssinjs-unexpected-lessons-for-drupal-component-design