CSS Modules: Who, what, where, when and why?!

2c4d5ca71a92e0860a78e4f9e50e4406?s=47 Chris Pearce
February 25, 2016

CSS Modules: Who, what, where, when and why?!

An exploration into the fundamentals of CSS Modules and how it can allow a rapidly growing product to be built effectively.

As front-end developers we have the tendency to form a love-hate relationship with our CSS. On one hand it can be satisfyingly trivial to piece together some really good looking UI but on the other it can become an unruly beast if not treated with extreme caution. CSS Modules has been born out of problems scaling CSS and provides us with a revolutionary shift in how we are forced to consider writing our styles

Presented at "Frontend London" 25th February 2016.

http://www.frontendlondon.co.uk/

Further reading: http://chrispearce.co/elephants-the-three-code-ilities-two-months-with-css-modules/

2c4d5ca71a92e0860a78e4f9e50e4406?s=128

Chris Pearce

February 25, 2016
Tweet

Transcript

  1. CSS Modules: Who, what, where, when and why? @chrisui

  2. Chris Pearce Front-end Engineer at Lystable @chrisui

  3. Who is behind CSS Modules?

  4. Glen Maddern @geelen Mark Dalgleish @markdalgleish Tobias Koppers @sokra

  5. What is CSS Modules?

  6. Locally scoped CSS • Selectors scoped to file • Only

    accessible by direct reference
  7. GLOBAL! What do we do now?

  8. What do we really we do now?

  9. What would CSS Modules do?

  10. styles-a.css styles-b.css

  11. How do we consume styles from CSS Modules?

  12. CSS Modules fundamentally changes the way we think about and

    write our styles
  13. None
  14. None
  15. Where should I use CSS Modules?

  16. Component driven applications Especially when: Many components? Many developers?

  17. When can I use CSS Modules?

  18. Anytime! • Will require special loading • Can live happily

    alongside existing global CSS • Better templating support soon
  19. Why should I use CSS Modules?

  20. ‘The Three Code-Ilities’

  21. Maintainability Strong component encapsulation means it is easy to locate

    where to make changes and doesn’t require external contextual thought.
  22. Scalability Encapsulated component and style architecture means infinite developers can

    work on infinite components atomically.
  23. Stability Pure styles makes testing easy and breaking things difficult.

  24. Bonus: How do I stay DRY?

  25. Composition in CSS Modules

  26. Component Composition

  27. In summary CSS Modules has provided us greater sanity when

    writing styles at Lystable
  28. That’s all! @chrisui