How to combine multiple css framework with overpalling classes

Question

I want to use both materialize and bootstrap on my website. Problem is that classes overlap, how can I narrow framework to style only part of website? Or maybe how can I namespace it? I only want to use small subset of materialize (for example cards component) and use bootstrap for general styling (for example grid system.

I am also using bower with grunt, so if the solution goes well with automation process of grunt it will be helpful.

Answer 1

Using any of the preprocessors, like sass, less, or my favorite, stylus, you can easily nest an entire CSS file inside a top level class, effectively namespacing

// stylus
.top-level-class
  .nested-class (or entire file)
    color red

// generating
.top-level-class .nested-class {
  color: red;
}