Best strategy about how to deal with two css frameworks at the same time in a project

452 Views Asked by At

Suppose the fact that I am working on a SPA project which has two different CSS frameworks and they must coexist between themselves: a "new and fresh" framework and another "old and painful" one. Every module of our web app should be done with the new CSS framework, but the old one has such an aggressive rules that overwrites some of the basic normalised/reset rules of our new framework and affects the new css. An example:

old-framework.css

// It's a stupid thing, but in this example this code will modify your new 
//framework because doesn't add 'color:black' to define the basic style 
// again.
body { color: red }; 

I have considered different solutions but nothing of them work well for me:

  • Use css namespacing for the new framework. It is fine to avoid modifying the old styles, but what if do you have a new module with new css contained in a module what works with old css? This new module will contain a lot of css bin.

  • Create a huge and crazy css "normalise" file which removes all the css rules that your new framework doesn't want. The bigger your old css framework, the higher the amount of rules you must add to remove the previous styles. This has a huge, massive impact in the web performance to "restore" the "initial" browser styles.

  • A combination of the two: the new framework has css namespacing, the old framework contains a "normalise" styles at the end of the file. This is the best choice I have able to find in my particular case at the moment, but I would like to believe that another solution is possible.

How do you deal with this problem? In your view, what could be the best strategy to deal with it?

1

There are 1 best solutions below

0
On

Honestly I would try to dump the old framework... that's the only way to do it 'properly' with a scenario giving you complete control over your development environment.

Alternatively you can work out which parts of the old framework are totally essential to hold the site together and extract those parts, ditching the rest. This should remove as much of the 'normalizing' parts as possible. Any holes can be overridden relatively easily (hopefully).