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

Session Track

Front End

Experience level

Beginner

Drupal Version

Drupal 8 (current)

Session Time Slot(s)

Time: 
09/27/2017 - 17:00 to 09/27/2017 - 18:00
Room: 
Strauss