競合のないバージョンのCSSスタイルシートを作成するための良い方法は何ですか?Bootstrapのクラスと重複するクラスを持つコードがたくさんあるとしましょう。
これは有効ですか:class="bootstrap"
ブートストラップスタイルを適用する必要がある祖先要素にを追加してから、すべてに接頭辞を付けるように変更しbootstrap.css
ますか?rule {}
.bootstrap rule {}
競合のないバージョンのCSSスタイルシートを作成するための良い方法は何ですか?Bootstrapのクラスと重複するクラスを持つコードがたくさんあるとしましょう。
これは有効ですか:class="bootstrap"
ブートストラップスタイルを適用する必要がある祖先要素にを追加してから、すべてに接頭辞を付けるように変更しbootstrap.css
ますか?rule {}
.bootstrap rule {}
また、衝突を避けるために、最近ブートストラップフォームスタイルでこれを行う必要がありました。bootstrap.less(または独自のカスタムバージョン)のすべての@importsを:で囲み、ブートストラップを再構築できることがわかりました.bootstrap { ... }
。これで、すべてのCSSセレクターの前に。が付けられ.bootstrap
ます。
はい。これは醜いアプローチであり、DOMバッシング(パフォーマンスの低下)が発生します。コードをリファクタリングしてブートストラップスタイルを完全に分離できなかった理由はありますか?
うまくいかない理由はわかりませんが、それを行うことにはおそらくパフォーマンスへの影響がいくつかあります。それらが検討するのに十分重要であるかどうかはわかりません。競合するクラスの名前を変更することをお勧めします。
チェックアウトするリソースがいくつかあります。
http://www.vanseodesign.com/css/css-selector-performance/
https://developer.mozilla.org/en/Writing_Efficient_CSS
これは、MozillaのCSS効率ガイドライン(2番目のリンク)からのものです。「これは、パフォーマンスを劇的に向上させるための鍵です。特定の要素をチェックするために必要なルールが少ないほど、スタイルの解決が速くなります。」