diff --git a/README.md b/README.md
index f983f78..559efa5 100644
--- a/README.md
+++ b/README.md
@@ -84,6 +84,25 @@ Note: If you are using more than one type of component style files (ie a .less f
 
 To use this with pods, you just need to include a style file in your component pods directory alongside your `template.hbs` or `component.js` files.
 
+### Usage with routes
+
+To use this with routes you need to use pods for the routes and modify the `application.hbs` template a little bit.
+Let's assume your `application.hbs` template looks like this:
+
+```hbs
+{{outlet}}
+```
+
+To be able to use this for routes, you need to add a wrapping `div` around the outlet:
+
+```hbs
+<div class={{routeStyleNamespaceClassSet}}>
+  {{outlet}}
+</div>
+```
+
+After that it's quite easy: add a style file in your route directory alongside your `route.js` or `template.hbs` files.
+
 ### Usage with classic (non pod) structure
 
 You can use classic Ember app structure by placing component styles in
@@ -96,13 +115,13 @@ the same component both are included but the pod style will take precedence.
 ### Use in addons
 In order to use this inside of an addon, you need to add your style files inside of the components in the
 addon directory. You will then be able to import the 'pod-styles' file inside of your addon style file which
-is in the `/addon/styles` directory. These styles will then be added to the `vendor.css` file like normal. 
+is in the `/addon/styles` directory. These styles will then be added to the `vendor.css` file like normal.
 
 If you are using classic (non pod) structure, your addon directory structure might look like:
 ```
 yourAddonDirectory
 │   index.js
-│   ... etc    
+│   ... etc
 └───addon
 │   └───components
 │       │   yourAddonComponent.js
diff --git a/addon/initializers/route-styles.js b/addon/initializers/route-styles.js
new file mode 100644
index 0000000..e69de29
diff --git a/app/initializers/route-styles.js b/app/initializers/route-styles.js
new file mode 100644
index 0000000..1652280
--- /dev/null
+++ b/app/initializers/route-styles.js
@@ -0,0 +1,28 @@
+import Router from '@ember/routing/router';
+import { getOwner } from '@ember/application';
+import podNames from 'ember-component-css/pod-names';
+
+Router.reopen({
+  didTransition(routes) {
+    this._super(...arguments);
+
+    const classes = [];
+    for (let route of routes) {
+      let currentPath = route.name.replace(/\./g, '/');
+
+      if (podNames[currentPath]) {
+        getOwner(this).lookup(`controller:${route.name}`).set('routeStyleNamespaceClass', podNames[currentPath]);
+        classes.push(podNames[currentPath]);
+      }
+    }
+
+    getOwner(this).lookup('controller:application').set('routeStyleNamespaceClassSet', classes.join(' '));
+  }
+});
+
+export function initialize() {}
+
+export default {
+  name: 'route-styles',
+  initialize
+};
diff --git a/tests/acceptance/css-test.js b/tests/acceptance/css-test.js
index d5aba81..92a6a8c 100644
--- a/tests/acceptance/css-test.js
+++ b/tests/acceptance/css-test.js
@@ -44,3 +44,19 @@ test('BEM variant rule followed', function(assert) {
     assert.equal(find('[class$=__element--variant]').css('color'), 'rgb(0, 0, 5)');
   });
 });
+
+test('route style followed', function(assert) {
+  visit(`/${TYPE}`);
+
+  andThen(function() {
+    assert.equal(find(`div[class^="__${TYPE}"]`).css('color'), 'rgb(0, 1, 0)');
+  });
+});
+
+test('nested route style followed', function(assert) {
+  visit(`/${TYPE}/nested`);
+
+  andThen(function() {
+    assert.equal(find(`div[class*="__${TYPE}__nested"]`).css('color'), 'rgb(0, 2, 0)');
+  });
+});
diff --git a/tests/acceptance/less-test.js b/tests/acceptance/less-test.js
index 1d853d3..e5043ff 100644
--- a/tests/acceptance/less-test.js
+++ b/tests/acceptance/less-test.js
@@ -44,3 +44,23 @@ test('BEM variant rule followed', function(assert) {
     assert.equal(find('[class$=__element--variant]').css('color'), 'rgb(0, 0, 5)');
   });
 });
+
+test('route style followed', function(assert) {
+  visit(`/${TYPE}`);
+
+  andThen(function() {
+    assert.equal(find(`div[class^="__${TYPE}"]`).css('color'), 'rgb(0, 1, 0)');
+  });
+
+  andThen(function() {
+    visit(`/${TYPE}/nested`);
+  });
+});
+
+test('nested route style followed', function(assert) {
+  visit(`/${TYPE}/nested`);
+
+  andThen(function() {
+    assert.equal(find(`div[class*="__${TYPE}__nested"]`).css('color'), 'rgb(0, 2, 0)');
+  });
+});
diff --git a/tests/acceptance/sass-test.js b/tests/acceptance/sass-test.js
index a8ae93e..ab5f406 100644
--- a/tests/acceptance/sass-test.js
+++ b/tests/acceptance/sass-test.js
@@ -54,3 +54,19 @@ test('mixin psudo elements do not get scoped', function(assert) {
     assert.equal(item.css('color'), 'rgb(0, 0, 6)');
   });
 });
+
+test('route style followed', function(assert) {
+  visit(`/${TYPE}`);
+
+  andThen(function() {
+    assert.equal(find(`div[class^="__${TYPE}"]`).css('color'), 'rgb(0, 1, 0)');
+  });
+});
+
+test('nested route style followed', function(assert) {
+  visit(`/${TYPE}/nested`);
+
+  andThen(function() {
+    assert.equal(find(`div[class*="__${TYPE}__nested"]`).css('color'), 'rgb(0, 2, 0)');
+  });
+});
diff --git a/tests/acceptance/scss-test.js b/tests/acceptance/scss-test.js
index 3b30321..06f789e 100644
--- a/tests/acceptance/scss-test.js
+++ b/tests/acceptance/scss-test.js
@@ -65,3 +65,19 @@ test('children of root @for rules are namspaced', function(assert) {
     }
   });
 });
+
+test('route style followed', function(assert) {
+  visit(`/${TYPE}`);
+
+  andThen(function() {
+    assert.equal(find(`div[class^="__${TYPE}"]`).css('color'), 'rgb(0, 1, 0)');
+  });
+});
+
+test('nested route style followed', function(assert) {
+  visit(`/${TYPE}/nested`);
+
+  andThen(function() {
+    assert.equal(find(`div[class*="__${TYPE}__nested"]`).css('color'), 'rgb(0, 2, 0)');
+  });
+});
diff --git a/tests/acceptance/styl-test.js b/tests/acceptance/styl-test.js
index 89821f6..522203d 100644
--- a/tests/acceptance/styl-test.js
+++ b/tests/acceptance/styl-test.js
@@ -44,3 +44,19 @@ test('BEM variant rule followed', function(assert) {
     assert.equal(find('[class$=__element--variant]').css('color'), 'rgb(0, 0, 5)');
   });
 });
+
+test('route style followed', function(assert) {
+  visit(`/${TYPE}`);
+
+  andThen(function() {
+    assert.equal(find(`div[class^="__${TYPE}"]`).css('color'), 'rgb(0, 1, 0)');
+  });
+});
+
+test('nested route style followed', function(assert) {
+  visit(`/${TYPE}/nested`);
+
+  andThen(function() {
+    assert.equal(find(`div[class*="__${TYPE}__nested"]`).css('color'), 'rgb(0, 2, 0)');
+  });
+});
diff --git a/tests/dummy/app/css/nested/styles.css b/tests/dummy/app/css/nested/styles.css
new file mode 100644
index 0000000..f0b1090
--- /dev/null
+++ b/tests/dummy/app/css/nested/styles.css
@@ -0,0 +1,3 @@
+& {
+  color: rgb(0, 2, 0);
+}
diff --git a/tests/dummy/app/css/styles.css b/tests/dummy/app/css/styles.css
new file mode 100644
index 0000000..8b50cd9
--- /dev/null
+++ b/tests/dummy/app/css/styles.css
@@ -0,0 +1,3 @@
+& {
+  color: rgb(0, 1, 0);
+}
diff --git a/tests/dummy/app/less/nested/styles.less b/tests/dummy/app/less/nested/styles.less
new file mode 100644
index 0000000..f0b1090
--- /dev/null
+++ b/tests/dummy/app/less/nested/styles.less
@@ -0,0 +1,3 @@
+& {
+  color: rgb(0, 2, 0);
+}
diff --git a/tests/dummy/app/less/styles.less b/tests/dummy/app/less/styles.less
new file mode 100644
index 0000000..8b50cd9
--- /dev/null
+++ b/tests/dummy/app/less/styles.less
@@ -0,0 +1,3 @@
+& {
+  color: rgb(0, 1, 0);
+}
diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js
index 5313480..8a148a4 100644
--- a/tests/dummy/app/router.js
+++ b/tests/dummy/app/router.js
@@ -4,14 +4,26 @@ import config from './config/environment';
 const Router = EmberRouter.extend({
   location: config.locationType,
   rootURL: config.rootURL
-});
+}).map(function() {
+  this.route('css', function() {
+    this.route('nested');
+  });
 
-Router.map(function() {
-  this.route('scss');
-  this.route('sass');
-  this.route('styl');
-  this.route('less');
-  this.route('css');
+  this.route('scss', function() {
+    this.route('nested');
+  });
+
+  this.route('sass', function() {
+    this.route('nested');
+  });
+
+  this.route('styl', function() {
+    this.route('nested');
+  });
+
+  this.route('less', function() {
+    this.route('nested');
+  });
 
   this.route('template-style-only');
   this.route('no-style-files-yet');
diff --git a/tests/dummy/app/sass/nested/styles.sass b/tests/dummy/app/sass/nested/styles.sass
new file mode 100644
index 0000000..a46923a
--- /dev/null
+++ b/tests/dummy/app/sass/nested/styles.sass
@@ -0,0 +1,3 @@
+&
+  color: rgb(0, 2, 0);
+
diff --git a/tests/dummy/app/sass/styles.sass b/tests/dummy/app/sass/styles.sass
new file mode 100644
index 0000000..09612b8
--- /dev/null
+++ b/tests/dummy/app/sass/styles.sass
@@ -0,0 +1,2 @@
+&
+  color: rgb(0, 1, 0)
diff --git a/tests/dummy/app/scss/nested/styles.scss b/tests/dummy/app/scss/nested/styles.scss
new file mode 100644
index 0000000..f0b1090
--- /dev/null
+++ b/tests/dummy/app/scss/nested/styles.scss
@@ -0,0 +1,3 @@
+& {
+  color: rgb(0, 2, 0);
+}
diff --git a/tests/dummy/app/scss/styles.scss b/tests/dummy/app/scss/styles.scss
new file mode 100644
index 0000000..8b50cd9
--- /dev/null
+++ b/tests/dummy/app/scss/styles.scss
@@ -0,0 +1,3 @@
+& {
+  color: rgb(0, 1, 0);
+}
diff --git a/tests/dummy/app/styl/nested/styles.styl b/tests/dummy/app/styl/nested/styles.styl
new file mode 100644
index 0000000..a46923a
--- /dev/null
+++ b/tests/dummy/app/styl/nested/styles.styl
@@ -0,0 +1,3 @@
+&
+  color: rgb(0, 2, 0);
+
diff --git a/tests/dummy/app/styl/styles.styl b/tests/dummy/app/styl/styles.styl
new file mode 100644
index 0000000..e497317
--- /dev/null
+++ b/tests/dummy/app/styl/styles.styl
@@ -0,0 +1,2 @@
+&
+  color rgb(0, 1, 0)
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index c24cd68..ad47b80 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -1 +1,3 @@
-{{outlet}}
+<div class={{routeStyleNamespaceClassSet}}>
+  {{outlet}}
+</div>