33

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

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

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

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

アップデート：

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

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

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

body {
    div.container {
        p {
            a {
                color: purple;
            }
        }
    }
}

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

body div.container p a {
    color: purple;
}

ただし、特定性フィルターが存在する場合 (存在する場合) は、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 つの優れた記事を以下に示します。

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

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

CSS 固有性のポイント

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

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

CSS 固有性順

Massive CSS の過ちトップ 5

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

プロセッサー

きれいなCSS

CSS 整頓

4

4 に答える 4

10

別のアプローチを試みることができます。セレクターをできるだけ小さく (特異性を低く) 記述してみてください。必要な場合にのみ、より具体的にします。その作業方法では、ツールは必要ありません。

于 2012-08-08T14:44:00.680 に答える
2

2 つ以上のルールが衝突している場合に、それが唯一の救いになるため、具体性なしではどうしようもありません。具体性はごちゃ混ぜの CSS ルール全体に正気をもたらします。CSS セレクターなど、あなたが話した内容のいくつかは、Firefox/Firebug を使用して実行できます。私はブラウザの互換性にもっと悩まされています。

于 2012-08-16T14:38:04.783 に答える
2

これを投げ出すだけです--あなたの質問に「答える」わけではありませんが、CSSプログラミングをよく行う人々のために私が広めたいツールです：Firebug。

よく知らない方のために説明すると、これは Web ブラウザー用のツールです。ページがインストールされたら、ページをプルアップし、右クリックして [Inspect Element] を選択します。ページのさまざまな要素に影響を与えるすべての css が表示され、クリーンで正確な css コードを作成するのに役立ちます。また、わずかな変更でページがどのように見えるかについての即時更新を簡単に確認できます. 他の CSS コードによってオーバーライドされている無駄な CSS コードを通知します。

また！Firebug は、ほぼすべてのブラウザーで利用できるようになりました。Firefoxだけではありません。個人的には、Chrome で使用するのが好きです。

于 2012-08-16T16:23:58.223 に答える
1

実際、HTML5 と CSS3 を使用してこれを行う方法があります。標準的な手法は、HTML 5 属性「data-」を使用して要素を指定し、この属性に対して CSS 選択を行うことです。これは属性の目的ではありませんが、サイトのテーマを切り替えるために使用できるいくつかの要素をカスタムで指定できます。

したがって、たとえば、指定することで、CSS で手動で特異性フィルターを作成することができます。

<b data-specificity=2>test</b>

ここで、data-specificity は上記の親にのみ一致します。

アップデート：

たとえば、段落クラスがあり、どの親、または段落がプロパティを継承できる親の数を指定したいとします。継承可能な潜在的な親ごとにルールを使用します。

p[data-specificity="1"]{
    color:red;
    font-family:verdana;
    text-decoration:underline;
}
p[data-specificity="2"]{
    color:black;
    font-family:arial;
}
div.container > *[data-specificity="2"] {
    font-family:impact;
    color:blue;
    text-decoration:underline;
}

したがって、これらのルールは、div コンテナーの直接の子であり、特異性 2 を持つすべての p タグが、div コンテナーからプロパティを継承できることを意味します。div の青色は、データ固有性 2 の p に継承されます。

これを確認できるJSFiddleを次に示します。

このように、HTML5 を使用すると、どの要素がどのプロパティを継承できるかを正確に制御できます。(子要素と親要素の両方に) 書くのは余分なコードがたくさんありますが、これを使用して不必要な特定性を取り除くことができます。

この方法を実際に使っている人を実際に見たことはありません.

于 2012-08-16T21:26:12.597 に答える