私が 2 つの異なる CSS フレームワークを持つ SPA プロジェクトに取り組んでおり、「新しくて新鮮な」フレームワークと別の「古くて面倒な」フレームワークを共存させる必要があるとします。Web アプリのすべてのモジュールは新しい CSS フレームワークで行う必要がありますが、古い CSS フレームワークには、新しいフレームワークの基本的な正規化/リセット ルールの一部を上書きし、新しい CSS に影響を与える非常に積極的なルールがあります。例:
古い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 };
私はさまざまな解決策を検討しましたが、どれもうまくいきません。
新しいフレームワークに css 名前空間を使用します。古いスタイルの変更を避けるのは問題ありませんが、古い css で動作するモジュールに新しい css を含む新しいモジュールが含まれている場合はどうでしょうか? この新しいモジュールには、大量の CSS ビンが含まれます。
新しいフレームワークが必要としないすべての css ルールを削除する巨大でクレイジーな css「正規化」ファイルを作成します。古い CSS フレームワークが大きくなればなるほど、以前のスタイルを削除するために追加しなければならないルールの量が増えます。これは、Web パフォーマンスに非常に大きな影響を与え、「初期」ブラウザ スタイルを「復元」します。
2 つの組み合わせ: 新しいフレームワークには css 名前空間があり、古いフレームワークにはファイルの末尾に「正規化」スタイルが含まれています。これは、現時点で私の特定のケースで見つけることができる最良の選択ですが、別の解決策が可能であると信じたい.
この問題にどう対処しますか?あなたの見解では、それに対処するための最善の戦略は何ですか?