Cascading CSS collisions - Do I need multiple Ember apps

Design
1

I have an application using Twitter Bootstrap 3 that has three main areas:

  1. Admin
  2. Public
  3. Private

They have completely different overridden CSS styles so since I need to include all 3 of the style sheets in index.html they all collide and the UI is a mess.

I don’t see how to use different styles (or more precisely different overridden versions of the same style) in the three different areas.

I dont want to make them 3 different apps but thats the only thing now that seems manageable.

2

Are you familiar with CSS namespacing? Essentially, the concept is using a central class for each “bucket” if you will, such that any styles you put beneath it will not flow over into the rest of your website.

Any styles you want to be global like “helpers” or forms, etc can be written without a namespace.

For example:

.admin {
     color: blue;
 }

    .admin ul {
         padding: 1em;
     }

 .public {
      color: red;
 }

     .public ul {
          padding: 1.5em;
     }

Then the highest container for that section of your site would get the class and everything inside would inherit the styles from the namespace class.

Some related reading on the topic: CSS styling conflict prevention and namespacing techniques (Stack Overflow)

3

Yes I am very familiar with the concept my problem is a little deeper.

I will reuse a ton of HBS templates (but have sep views) and Ember components. So the style name in the template will be the same and at runtime I would like to be able to inject (make available) the CSS styles from inside the view…

4

@Brendan can you explain why the namespacing wouldn’t work? I think it would. A css preprocessor could help to prefix all the rules.

If only one area is ever shown at a time, you could just swap out the rules the page has loaded. I’ve made a demo of ember doing that - http://emberjs.jsbin.com/ezAWOgu/1/edit

Lastly you could investigate the shadow dom - Shadow DOM - which can insulate a tree of html elements from the rest of the styles on the page.