Search code examples
htmlcssmeteoriron-router

Using CSS Namespacing

I am noob in CSS and HTML, So bear with me for this question.

I am integrating a web application with our existing application. They defined some css rules which is conflicting with our application.

My problem is: Is there any good way to separate out the CSS rules to be used each application pages? I tried to look at CSS namespace, seems to be lot of rework, as I have to prepend each tag element with namespace.

Update: I am trying to integrate a Meteor based app into another Meteor based application, now I don't want the 2 css two mix.

Solution

  • I ended up following solution which worked out for me.

    For another app which i am integrating, i made its whole body into a container and gave a class to it.

    In layout of another app,

    <!-- Another application body layout-->
<body>
<div class="another-app-container">
  <!-- Here goes whole layout of page -->
   <p  class='someClass' > ....
     <div class='myClass'> </div>

   </p>
</div>

</body

    In CSS of that app, i applied following CSS rule,

        .another-app-container * .someclass{
    // CSS rule goes here
    }
   .another-app-container * .myClass {
    // CSS rule goes here
    }

    Beauty of CSS i got here is, '*' which applied the CSS rules even it has lot of nesting of elements CSS.

    So, it segregated the CSS for my own from another application