3

jQuery UIがCSSを次のように記述するのはなぜですか？

.ui-dialog .ui-dialog-titlebar-close {}
.ui-dialog .ui-dialog-content {}

彼らのクラス名は非常にわかりやすいので、これを行った場合、衝突が発生する可能性は低く、衝突する可能性は低いと思います。

.ui-dialog-titlebar-close {}
.ui-dialog-content {}

彼らは不必要にクラスをネストしていて、ブラウザにもっと多くの仕事をさせているように私には思えますが、私が気付いていない理由があるのではないかと思います。なぜ彼らがクラスをネストするのか誰かが知っていますか？

4

3 に答える 3

2

.ui-dialog-titlebar-closeとのCSS.ui-dialog-contentが再利用可能であることが原因である可能性があります。したがって、基本的には、これらのクラスがの子である場合にのみ、特定のスタイルをダイアログに継承するようにしています。.ui-dialog

于 2013-02-06T20:54:18.110 に答える
1

彼らは具体的にこれを行います。

クラスを持つ要素には、.ui-dialog-contentなどの他のいくつかのクラスもあります.ui-widget-content。

<div id="dialog" class="ui-dialog-content ui-widget-content">

規則が他のクラスの規則よりも優先されるようにするために、.ui-dialog-contentそれらは.ui-dialog前もって追加します。

これは、要素を調べると明らかです。の背景と境界線のルールは.ui-widget-content上書きされます。

.ui-dialog .ui-dialog-content {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    overflow: auto;
    padding: 0.5em 1em;
    position: relative;
}

.ui-widget-content {
    background: url("images/ui-bg_highlight-hard_100_f2f5f7_1x100.png") repeat-x scroll 50% top #F2F5F7; /* Overridden */
    border: 1px solid #DDDDDD; /*Overridden*/
    color: #362B36;
}
于 2013-02-06T21:02:44.087 に答える
1

少なくとも理論的には、少なくともパフォーマンスの観点からは、浅い、できれば1レベルのセレクターが望ましいという事実については正しいです。ただし、ほとんどの場合、レンダリングエンジンの最適化により、パフォーマンスのオーバーヘッドがわずかに相殺されます。

これは、メンテナンスのしやすさ、読みやすさ、スタイルシートのサイズが重要になるときです。特異性を下げると、「部分的な」クラスをリサイクルできます。レンダリングされたマークアップを見ると、他.ui-dialogのクラスがたくさん適用されます。

ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable

代わりに、すべてのプロパティを1つのルールに適用することが望ましいでしょうか。開発者の観点からは間違いなく、そのアプローチはメンテナンスの悪夢になりました。単一の表示プロパティを変更してから、例のようにすべての「特定の」ルールにバックデートする必要があると想像してください。

これらのセレクターの特異性を高めるために、セクターセレクター（たとえば.ui-dialog .ui-dialog-content）を修飾する理由は、すぐには明らかではないにしても、はるかに簡単です。たとえば.ui-helper-reset、ルールはcssファイルの下部で宣言されているため、クラスは基本的に以前に設定されたスタイルを無効にします。

.ui-helper-reset {
    border: 0 none;
    font-size: 100%;
    line-height: 1.3;
    list-style: none outside none;
    margin: 0;
    outline: 0 none;
    padding: 0;
    text-decoration: none;
}

これらのプロパティのいずれかをオーバーライドするには、より特異性の高いセレクターを使用する必要があります。

個人的に私はこのパターンが嫌いです-そしてコードの一貫性がそのようなクラス構造の背後にある推論にもっと貢献したことを願っています。

于 2013-02-06T21:49:56.680 に答える