16 April 2016

React Amsterdam 2016: JavaScript Style Sheets

Speaker: @oleg008
Slides

Why / Problems


React is about components
CSS is for documents

Problems:

  • Global namespace
  • Implicit dependencies
  • Dead code
  • Minification
  • Sharing constants (between CSS and JS)
  • Non-deterministic resolution (CSS specificity concept)
  • Isolation (very high specificity)
  • Complex selectors
  • Redundancy
Mentions: @vjeux's talk React: CSS in JS (slides)

Solution


3 options:
  • Pure Inline (misses some features & performance problems)
  • Mixed Mode (complicated code)
  • Pure Inline Style Sheets
Pure Inline Style Sheets can be done with JSS library (written by the speaker).

JSS library


Virtual CSS Tree -> Process -> Render

  • Lazy compilation
  • Ref counting
Offers things not available with Inline Styles:
  • Media Queries
  • Keyframes Animation
  • Font Faces
  • Pseudo Selectors
  • Fallbacks
  • Rules Caching
  • Rules Sharing
Other benefits compared to Inline Styles:
  • Class Names are fast
  • Smaller payload
  • Tools Agnostic
  • Extensible (mentions: JSS-isolate)
Problems left:
  • Feels overengineered to some
  • Wrong language for some
  • No standard DSL
  • Blocks initial rendering

Conclusion


Not just for big projects, but also if maintainability counts.