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/

Transcript

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

   View Slide

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

   View Slide

3. Who is behind CSS Modules?
   

   View Slide

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

   View Slide

5. What is CSS Modules?
   

   View Slide

6. Locally scoped CSS
   ● Selectors scoped to file
   ● Only accessible by direct
   reference
   

   View Slide

7. GLOBAL!
   What do we do now?
   

   View Slide

8. What do we really we do now?
   

   View Slide

9. What would CSS Modules do?
   

   View Slide

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

    View Slide

11. How do we consume styles from CSS Modules?
    

    View Slide

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

    View Slide

13. View Slide

14. View Slide

15. Where should I use CSS Modules?
    

    View Slide

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

    View Slide

17. When can I use CSS Modules?
    

    View Slide

18. Anytime!
    ● Will require special loading
    ● Can live happily alongside existing
    global CSS
    ● Better templating support soon
    

    View Slide

19. Why should I use CSS Modules?
    

    View Slide

20. ‘The Three Code-Ilities’
    

    View Slide

21. Maintainability
    Strong component encapsulation
    means it is easy to locate where to make
    changes and doesn’t require external
    contextual thought.
    

    View Slide

22. Scalability
    Encapsulated component and style
    architecture means infinite developers
    can work on infinite components
    atomically.
    

    View Slide

23. Stability
    Pure styles makes testing easy and
    breaking things difficult.
    

    View Slide

24. Bonus: How do I stay DRY?
    

    View Slide

25. Composition in CSS Modules
    

    View Slide

26. Component Composition
    

    View Slide

27. In summary CSS Modules has
    provided us greater sanity when
    writing styles at Lystable
    

    View Slide

28. That’s all!
    @chrisui
    

    View Slide