In the midst of developing a Single Page Application (SPA) project, I am faced with the challenge of integrating two conflicting CSS frameworks: one that is considered "new and fresh" and another that is deemed "old and painful". The requirement is that every module within our web app must adhere to the new CSS framework. However, the old framework's aggressive rules override some basic styles of the new framework, causing conflicts. An example of this issue can be seen in the snippet below:
old-framework.css
// This code directly affects your new framework by not defining 'color:black', thus altering the basic style.
body { color: red };
Various solutions have been considered, yet none seem to provide an ideal fix:
Utilize css namespacing for the new framework. While this approach prevents modification of old styles, it leads to complications when new modules contain both old and new CSS.
Create an extensive "normalize" CSS file to eliminate unwanted rules from the old framework. The size of this file grows proportionate to the complexity of the old framework, impacting web performance due to restoring initial browser styles.
A combination of the above methods: implement css namespacing for the new framework and add normalization styles at the end of the old framework. This strategy appears to be the most effective in my current situation, but I remain open to alternative solutions.
How would you approach this dilemma? What do you believe is the best strategy for resolving this issue?