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
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
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