2012-04-30 29 views
3

CSSスタイルシートの競合しないバージョンを作成するにはどうすればよいですか?ブートストラップのクラスと重なるクラスを持つコードがたくさんあるとしましょう。 CSSの競合スタイル

は、この有効です:ブートストラップスタイルが適用されるべき下 class="bootstrap"に祖先要素を追加した後、 .bootstrap rule {}を持つすべての rule {}を接頭辞に bootstrap.cssを変えますか?

答えて

1

私はうまくいかない理由は見当たりませんが、それにはパフォーマンス上の影響が考えられます。考慮するには十分なのかどうかはわかりません。おそらく、競合するクラスの名前を変更する方がよいでしょう。ここで

は、チェックアウトするリソースのカップルです:

http://www.vanseodesign.com/css/css-selector-performance/

https://developer.mozilla.org/en/Writing_Efficient_CSS

そしてこれはMozillaのCSS効率ガイドライン(第2リンク)からです:「これは劇的にパフォーマンスを向上するための鍵であります与えられた要素をチェックするために必要なルールが少なくなれば、より速いスタイル解決が可能になります」

+1

また、Andy EdinboroughのCSS Stress Testerにgo a:http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling – Andrew

+0

おかげで、それは良い読書でした。 – ash

1

はい。それは醜いアプローチであり、あなたはDOM Bashing(遅いパフォーマンス)に慣れるでしょう。あなたのコードをリファクタリングしてブートストラップのスタイルを完全に分離できない理由はありますか?

+0

矛盾しているサードパーティのCSSを変更できないようにしましょう(したがって、競合しないバージョンの必要性)。 – ash

1

私は最近、衝突を避けるためにこれをブートストラップフォームスタイルで行う必要がありました。ブートストラップレス(または独自のカスタムバージョン)のすべての@importsを次のもので囲むことができます。.bootstrap { ... }ブートストラップを再構築します。今度はすべてのCSSセレクタに接頭辞.bootstrapが付きます。