Countdown to The New Year - Ember CSS Modules

This is the 22nd part of our December series–"Countdown to The New Year: 31 Days of Ember Addons". Highlighting a new addon each day until the new year starts, we hope you enjoy learning together with us!

Day 22

Today we are going to take a look at creating apps with style - using ember-css-modules.

What It Does

With the addon ember-css-modules, styling à la CSS Modules is only one ember install away. CSS Modules allow us to write styles which are scoped to particular parts of our application by default and allow style sharing by explicit opt-in mechanisms. The ember-css-modules addon helps us to co-locate css files next to our components, routes and controllers following Ember's file name conventions.

Why I Like It

Making the apps we are building look awesome can be really fun! But maintaining a growing CSS code base can also be really hard. CSS Modules are a great way to modularise our styles in a way that they apply locally to only the exact component or route we wrote them for by default. This helps us to add new stylish features to our code base with the confidence that the look&feel of other parts of our app is left unchanged. This confidence is helpful for us when editing, adding and deleting CSS even in large web applications.

Using ember-css-modules we can start leveraging CSS modules in our Ember app right away and even benefit from Ember's conventional approach for file arrangement: the co-located CSS files are quick to find right next to our routes and components and blend in nicely into the developer experience that Ember enthusiasts are familiar with.

Do you use ember-css-modules? Or another stylish addon? We'd love to hear about Ember addons you love for DecEmber in the comments below!