CSS-in-JS: unexpected lessons for Drupal component design

conference: Drupalcon Vienna 2017, Vienna

CSS class name "Semantics": Content semantics (what it is) vs. Design sementics (what it looks like)

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