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.

possible duplicate of [How to namespace Twitter Bootstrap so styles don't conflict](http://stackoverflow.com/questions/13966259/how-to-namespace-twitter-bootstrap-so-styles-dont-conflict) — CBroe, May 01 '15 at 01:23

score 2 · Accepted Answer · answered May 01 '15 at 01:23

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;
}

How to combine multiple css framework with overpalling classes

1 Answers1