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.
Further reading: http://chrispearce.co/elephants-the-three-code-ilities-two-months-with-css-modules/
CSS Modules: Who, what,
where, when and why?
Front-end Engineer at Lystable
Who is behind CSS Modules?
What is CSS Modules?
Locally scoped CSS
● Selectors scoped to file
● Only accessible by direct
What do we do now?
What do we really we do now?
What would CSS Modules do?
How do we consume styles from CSS Modules?
CSS Modules fundamentally
changes the way we think
about and write our styles
Where should I use CSS Modules?
Component driven applications
Especially when: Many components? Many developers?
When can I use CSS Modules?
● Will require special loading
● Can live happily alongside existing
● Better templating support soon
Why should I use CSS Modules?
‘The Three Code-Ilities’
Strong component encapsulation
means it is easy to locate where to make
changes and doesn’t require external
Encapsulated component and style
architecture means infinite developers
can work on infinite components
Pure styles makes testing easy and
breaking things difficult.
Bonus: How do I stay DRY?
Composition in CSS Modules
In summary CSS Modules has
provided us greater sanity when
writing styles at Lystable