問題タブ [css-specificity]

これはロングショットですが、不要な詳細を削除して CSS セレクターを最適化するツールはありますか?

CSS を作成するとき、競合を回避し、準ドキュメント化するために、意図的にセレクターを必要以上に具体的にしていることに気付きました。

与えられたルールのグループを分析し、他のルールとの重複に関して「独自性」を判断し、不要な特異性を取り除くツールがあれば素晴らしいことです。

ツール開発者がこれが必要とするすべてのシナリオにどのようにアプローチするか想像することさえできませんが、以前にこの分野で他の人の創意工夫に驚かされ、尋ねる価値があると考えました.

アップデート：

この質問に報奨金を追加しました。考えれば考えるほど、CSS 特異性フィルターがどれほど価値があるかを実感します。

たとえば、SassとLESSで入れ子になったルール/セレクターを操作する場合、過剰な入れ子は一般的でよく知られたアンチパターンであり、過度に具体的なセレクターに簡単につながる可能性があります。

TutsPlus の優れたコースMaintainable CSS with Sass and Compassには、これについての良い例があります。

Sass はこれらのネストの指示に従い、次の CSS 出力を生成します。

ただし、特定性フィルターが存在する場合 (存在する場合) は、CSS 開発者に潜在的な利点をもたらします。

1. Firebug や Chrome Dev Tools でスタイル ルールを調べたときに表示されるものと同様に、スタイルシートを DOM の 1:1 マッピングとして編成できます。スマート エディター/IDE は、共有スタイル/クラスを使用して DOM 要素のスタイルを自動入力できます。もちろん、その冗長性は、特異性フィルター/オプティマイザーによってフィルター処理されます。

2. スタイルシートは、DOM をスキャンしてそれを CSS セレクター/ルールに変換するツールによって事前に設定された構造を持つことができます。つまり、開発者は HTML を更新するだけで済みます。CSS の「ツリー」は、DOM の現在の状態を反映するために同期が保たれます。スマート エディターを使用すると、スタイル設定のために要素/クラスの CSS 定義にジャンプしたり、そのスタイル ルールを別のパネルに表示したりできます。

ある意味では、これは一歩後退したように思えます。たとえば、Dreamweaver や WebAssist にある新人が CSS を学習するのに役立つ機能のようなものです。しかし、CSS セレクター最適化ツールの基本的な考え方は簡単なことのように思えます。私が説明したタイプのワークフロー自動化は論理的な次のステップであり、触媒は特異性フィルターです。

よく知られている CSS エディターと Web IDE をいくつか調べましたが、単一の要素をターゲットにしてそのセレクターを生成する以外に、この種の機能を提供するものは見つかりませんでした。

更新 2: CSS セレクターのパフォーマンス

Spliff のコメントに応えて、CSS セレクターのパフォーマンスに関する 2 つの優れた記事を以下に示します。

• Steve Soudersによる CSS セレクターのパフォーマンスへの影響

• Chris Coyier によるCSS の効率的なレンダリング

どちらも、CSS のマイクロ最適化は努力する価値がないという点で一致していますが、過度に修飾された子孫セレクターは「効率の悪さ」です。私自身はまだベンチマークを行っていませんが、私が提案している「DOM マッピング」アプローチのようなものは、手動または自動の最適化ステップなしでパフォーマンス ヒットを引き起こすと思われます。

関連する質問、リンク、およびツール:

CSS 固有性のポイント

CSS の特異性を確認するためのツール

CSS をクリーンアップするためのツール

CSS 固有性順

Massive CSS の過ちトップ 5

Google: 効率的な CSS セレクター

プロセッサー

きれいなCSS

CSS 整頓

この例では：

http://jsfiddle.net/Ja29K/

ログインリンクを青色にする必要があるのは論理的ではありませんか？

私は、宣言が同じ起源と同じ重要性を持っていることを知っているので、それらをスコアリングする必要があります（セレクターの特異性）。

セレクターの特異性を計算するために、セレクターごとにテーブルを作成しました。

A =インラインスタイルの数：0
B = IDの数：0
C =クラスの数：0
D =要素の数：0

したがって、ログイン要素には、彼の色に関連する3つの衝突があります：a、 ＃header a、＃login

要素（A、B、C、D）

a（0、0、0、1）= 1
#header a（0、1、0、1）= 101
#login（0、1、0、0）= 100

セレクター「#headera」が最大のスコアだったので勝ちました。

だが

セレクター「#login」を「a＃login」に変更すると、次のようになります。a
＃login（0、1、0、1）= 101
引き分けで最後に勝つため、セレクター「#headera」が失われます。それが宣言されました。

だから、私が理解できないことは：

「#headera」セレクターは多くの要素を参照し、IDセレクター（たとえば#login）は1つの要素を参照するだけなので、IDセレクター宣言をその要素に適用するのは論理的ですよね？IDセレクターは、インラインスタイルと同じように、基本的に可能な限り最も具体的なものでなければならないと思うので、このCSS優先順位ロジックを本当に理解することはできません。

PS：私の悪い英語でごめんなさい:)

OK、私は CSS カスケードと特異性を「科学」として理解しようとしており、常に「ヒットまたはミス」アプローチに任せているわけではありません。誰かが私を助けてくれることを願っています。

私にはルールがあります：

特定のインスタンスで余白を変更するには、上書きする必要があります。

そこで、 に a を追加しclassて、次のdivように書きました。

ただし、ルール 2 はルール 1 を上書きしませんでした。

そこで、ルール 2 を次のように変更しました。

.bluebutton" " ルールを上書きします。/* ルール 1 */

最初に私はこのHTMLを書きました

次に、ボタンを a 内に変更して含め、次のdivように書きました。

html-2 はルール 3 で動作しました。

ルール 3 がルール 1 を上書きし、ルール 2 がルール 1 を上書きしない理由を誰かが理解するのを手伝ってくれますか? ルール 2 と 3 の重みは同じに見えます (私には)。ルール 2 はanchor任意の要素内の任意のタグを対象とし、ルール 3 は of を含むタグのみを対象classとするためでしょうか? 私が理解しようとしていることを明確に説明したことを願っています。.bluebutton.asideanchorclass.bluebutton

ありがとう！

次のシナリオでは、効率的なアルゴリズムはどうなるのだろうかと思っていました。

解析されたcssルールのセットが与えられます。

cssスタイルシートから、いくつかのルールセットが特定の要素に適用される可能性があります（<p class="pStyle anotherPStyle">hello</p>私のドキュメントではaと言います）。

最初にスタイルシートのどのルールが特定の要素に適用されるかを決定する必要があります（つまり、ここではp, pStyle and anotherPStyle）。次に、適用可能なルールを特定性（最も具体的なものから最も一般的なものへ）で並べ替えることができるコンパレータを作成します。注：ソートされたルールを適用するアルゴリズムはすでに設計されているため、その問題を効率的に解決する必要はありません。

私はいくつかのアイデア、つまり、特定のルールが固有であるDOMツリーのレベルを決定することを含むアイデアをいじっています...これが正しい方法かどうかはわかりませんが？

ブラウザエンジンはこれをどのように効率的に実行しますか？私はそれをJavaで複製したいと思っていますが、他の多くの言語に慣れているので、提供できるコードはどれでも大歓迎です。

ありがとう

次の html フラグメントがあるとします。

chrome と mozilla の両方がこのルールを選択する理由:

選択してもらいたい場合:

Firebug は両方のルールが適用されていることを示していますが、2 番目のセレクター チェーンを作成していると思う「より選択的」であっても、最初のセレクターが一番上に表示され、2 番目のセレクターのスタイルがリストのさらに下に表示され、すべてオーバーライドされます( firebug UI の取り消し線)

FWIW、IDベースのセレクターを追加すると最初に選択されることを確認しました。IDをあちこちに割り当てる必要はありません。次のように:

上記の2番目のcssセレクターを最初のものよりも具体的にするのを手伝ってくれる人はいますか?

これはすべて、ブートストラップ スタイルを模倣する、最近リリースされた primefaces ブートストラップ テーマで見つかったバグに関係しています。私の場合、実際のブートストラップも使用しており、btn-primary などのスタイルを pf commandButtons などに適用したいと考えています。

これは、primefaces パネル内に commandButton を配置するまで正常に機能します...その時点で、pf テーマのボタン スタイルがブートストラップのものを破壊します。ブートストラップ css にセレクターを追加して、pf のものから特定性を取得できると思っていました...しかし、明らかに、プレイする CSS セレクター Star Wars がもっとあります.... http://www.stuffandnonsense .co.uk/archives/css_specificity_wars.html

私は祖先 (特に親ではない) に従っていくつかのボタンのテーマを設定しようとしているので、... 次の HTML 構造があります。

ご覧のとおり、テーマは 2 つ.theme-aあり、.theme-b

CSS コードは次のようになります。

問題は、テーマ クラス (A と B、B と A) を切り替えると、A テーマのボタン (テーマ クラスに近い祖先を持ち、遠い祖先のスタイルを維持することに気付くでしょう)。黒ではなく青の背景)。

ボタンのプロパティが最も近い祖先に従って設定されるように、適切な特異性を実現するにはどうすればよいですか?

JSfiddle からのリンクは次のとおりです: http://jsfiddle.net/XVaQT/1/

私は明確な方法で説明したことを願っています:)

ありがとう</p>

これが私が解決しようとしている困難です。クライアントのページ内でスクローラー インターフェイスを開発しています。基本的に、Doctype、周囲の要素、およびクライアントのページに既にあるスタイルシートまたはスクリプトを変更することはできません。コードの小さなブロックをこの中に「合わせる」必要があります。これは Web 開発者にとって一般的です。ここで注意が必要なのは、ブロック内の一部の img 要素が、継承されたクライアントのスタイルシート内の CSS ルールの対象になっていることです (もちろん、これを削除または変更することはできません)。この場合、これを補うために、より具体的な CSS ルールを自分で実際に使用できない理由をここで説明するには長すぎますが、それは事実です。だから私の質問は：別のルールを作成するかルールを削除する以外に、HTML 要素が CSS ルールの対象にならないようにする方法はありますか? 難しいのは、

内の要素をターゲットにします:

ページ内の要素は、CSS ルールの「壁」を作成しません。CSS ルールは、コンテナを「ジャンプ」して要素をターゲットにします。したがって、次のようなルール

任意の img タグをターゲットにします。これを補うために私が知っている唯一の方法は、保護する正確な img を対象とするより具体的な CSS ルールを作成することです。でも、ここではそれができません。HTML を追加するだけで、CSS ルールを作成せずに同じ結果を得る方法はありますか?

/ * 明確にするために編集* /

私は CSS の規則、特異性、継承などを知っています。私の質問はより実用的でした。問題を明確にするために、次の例を検討してください。クライアントのスタイルシートに触れることができず、次の一般的なルールが定義されているとします。

問題は、次のように、対応する一般的なルールを設定して反対のことを行うことができないことです。

無に反するものなど存在しないからです。の反対は、、 、 などの"none"いずれかです。"inline""block""inline-block"

基本的に、これは最初の一般的な規則により、ページ内のdisplayすべてのプロパティを明示的に定義する必要があることを意味しimgます。そして、それはひどいです。だから私はこのような状況を解決するためのハックを見つけようとしていました (私の実際の問題はこれよりもさらに悪いですが、この例ははるかに明確で説明が簡単です)。

<div class="well well-large well-small" />Twitter ブートストラップhttps://github.com/twitter/bootstrap/blob/master/less/wells.lessの次のスタイルを検討してください。

CSS は、このような状況でどのパディングを適用するかをどのように決定しますか? 19px、24px、9px、または未定義の値になりますか? 特異性についての私の理解は初歩的なものであり、この場合、.well .well-large and .well-small

私はtwitterブートストラップ（TB）を使用していますが、CSSルールが優先されるべきではないときに優先されているようです。私は問題を示すためにこのフィドルを作成しました：

http://jsfiddle.net/whoiskb/Za2TB/

HTML

CSS（およびtwitterブートストラップへの外部リンク）

特異性ルールについて私が理解していることから、HTMLセレクターは1の値を取得するため、TBのラベルに定義されたルールは1の値のみを取得する必要があります。3つのhtmlセレクターと2つのクラスセレクターがあるため、クラスの値は23になります。それぞれ10の値を取得する必要があります。TB css定義のラベルセレクターが優先されていますが、フィドルでわかるように。

誰かが私がここで欠けているものを説明できますか？

ところで、私はこれを解決するために！importantタグを使用できることを知っています。私は、CSSの特異性ルールをよりよく理解しようとしているだけです。

Sass を使用して SCSS スタイルシートを 1 つにコンパイルし、assembled.cssHTTP リクエストを削減しています。スタイル設定のために個々のページに名前を付けるには、各ページ固有の CSS ファイルをそのページの<body>要素の ID セレクターでラップします。たとえば、次のようになります。

nanoc (ERB を使用) には、各ページの本文に HTML フォルダー構造に基づいてダッシュで区切られた一意の ID を割り当てるヘルパーがあるため、ルート ページは#supportまたは#productsになり、サブページは「#products」のような ID になります。 -ジャイアントスペースレーザー」。

これらの「製品」サブページにのみ適用される一連の SCSS ルールを作成したいと考えています (ルート レベルの#productsページ自体は含まれません)。次のように、ID の代わりに属性セレクターを使用する場合、特異性に関して注意すべきことはありますか?

私は実際には を使用したくありません!importantが、これらのページ固有のルールが、@import の順序で先行する '_base.scss' パーシャルで設定されたスタイルよりも優先されるようにしたいと考えています。HTML 構造を完全に制御できるので、理論的には、Sass ファイルで Erb を使用して、次のようにコンマ区切りの ID リストに置き換えることもできます。

-しかし、それは非常にエレガントではないようです。前もって感謝します。

編集：

私は他のスタイルを本当にカスケード依存の方法で書きました:

1. CSS を正規化する
2. HTML5 ボイラープレートと私自身の賢明なハウス ルール
3. CSS ライブラリ (この場合は Bourbon & Neat)
4. 独自のミックスインとプレースホルダー セレクターをインポートする「_source.scss」。
5. すべてのページのデフォルトのレイアウト フレームワークをスタイルする「_base.scss」。
6. 各ページの個々のコンテンツ スタイル設定用の一連の .scss ファイル - そして、必要に応じて base.scss レイアウトの決定を上書きすることを望んでいました (ページが標準から大きく逸脱する必要がある場合)。

いずれにせよ、これらの個々のページのスタイルシートは、特定の目的とページのために作成されているため、以前のデフォルトよりも確実に高い特異性を備えている必要があります。この 1 つの特定の目的 (ページ スタイルシートの名前空間) を除いて、意図的に ID セレクターを使用していません。

使用して、言う

「_base.scss」で

カスケードのさらに下の「products.scss」では、そうではありませんか? (注意: 4 つのクラスを使用する必要があることは、ひどい慣習であることはわかっています。名前空間を何かがすり抜けてしまうことを心配したくないだけです)。

別の - 本当に汚い - オプションがあると思います: body[id^="products-"]セレクターを何度も繰り返して、最も具体的なクラス強度ルールでさえ単純に数を上回ります。