19

私のHTMLはすべてマークアップされており、CSSを雨に降らせる準備ができています。問題は、私が始めることができるように、私が戻って私のすべてのIDとクラス名が何であるかを見つけなければならないということです。私が必要としているのは、HTMLを解析し、スタイル設定の準備ができているすべての可能な要素を含むスタイルシートを吐き出すツールです(おそらくいくつかのデフォルトでも)。そのようなツールは存在しますか?

4

9 に答える 9

10

私は過去に使用したこれの貧乏人のバージョンを持っています...これにはjqueryとfirebugが必要です...

<script type="text/javascript">
    $(document).ready(function() {

        $('*[@id]').each(function() {
            console.log('#' + this.id + ' {}');
        });
        $('*[@class]').each(function() {
            $.each($(this).attr('class').split(" "), function() {
                console.log('.' + this + ' {}');
            });
        });
     });
</script>

それはあなたに次のようなものを与えます:

#spinner {}
#log {}
#area {}
.cards {}
.dialog {}
.controller {}

代わりに「自然な」ページ順序にしたい場合...

<script type="text/javascript">
    $(document).ready(function() {
         $('*').each(function() {
             if($(this).is('[@id]')) {
                 console.log('#' + this.id + ' {}');
             }
             if($(this).is('[@class]')) {
                 $.each($(this).attr('class').split(" "), function() {
                     console.log('.' + this + ' {}');
                 });
             }
         });
     });
</script>

そのスクリプトを含むページをロードし、firebug から結果を切り取って貼り付けます...そして明らかに、スクリプトを削除します:)

重複を手動で削除するか、マップや配列などを使用して単純な重複チェックロジックを投げ込む必要があります.1つはID用、もう1つはクラス用です。

于 2008-08-19T21:26:01.947 に答える
7

これを初めて見たとき、「いい質問だ!ナイスな答えだ!」と思った。

少し考えてみると、これが良いアイデアかどうかはわかりません。これは、ASP.NET ページ内のすべてのコントロールに対してイベント ハンドラーを生成することや、データベース内のすべてのテーブルに対して CRUD プロシージャを生成することに少し似ています。次の 2 つの理由から、必要に応じて作成する方がよいと思います。

  1. 空のスタイル宣言による煩雑さの軽減
  2. (#navigation ul li a) のような子孫セレクターを使用するのではなく、クラス レベルですべてを記述することにより、CSS を誤用 (または過小使用) する誘惑を減らします。
于 2008-08-19T22:18:36.480 に答える
3

http://lab.xms.pl/css-generator/が説明に合っているようです。

于 2008-12-01T07:44:43.330 に答える
2

Jonに同意しますが、OPが望んでいることを実行することに問題はありません*。提供されているスクリプトを使用すると、すべてのクラスとIDを知ることができます。CSSで作業しているときに、それぞれを使用する必要があるかどうかを判断する必要があります。最後に、または実行していることを適切に処理していると感じた時点で、オプティマイザー/コンプレッサーを実行して、未使用のIDとクラスを削除します。

*動作上の前提:元のHTMLを作成しなかったか、作成した後で、「ここでは、CSSが本当に素晴らしいと思います。それから始めていたらよかったのに」と判断しました。:-)

于 2008-08-20T16:02:39.090 に答える
2

それが賢明な答えを伴う賢明な質問ではないというわけではありませんが、位置セレクターを理解していないときに人々が作成する、不必要にマークアップされた HTML のようなものを暗示していました。 ID。

<div id="nav">
  <ul id="nav_list">
    <li class="nav_list_item">
        <a class="navlist_item_link" href="foo">foo</a>
    </li>
    <li class="nav_list_item">
        <a class="navlist_item_link" href="bar">bar</a>
    </li>
    <li class="nav_list_item">
        <a class="navlist_item_link" href="baz">baz</a>
    </li>
  </ul>
</div>

div の id 以外のすべてを削除しても、その位置によってそこにあるすべてのスタイルを設定できます。そして明らかに、スクリプトはこれらすべての可能なセレクターを表示するわけではありませんよね?

言い換えれば、クラスや ID に対して行われるものとして CSS に焦点を絞ることが懸念されます。

于 2008-12-01T12:18:46.037 に答える
1

このブログ エントリは、ここで必要なものに似たものを参照しています。

「 stylizator.pl 」という Perl スクリプトへのリンクが含まれています。このスクリプトは、html を解析して可能な CSS 要素を探し、それらをファイルに出力します。

于 2008-08-19T21:39:17.820 に答える
1

私はジョンに同意しません。このソリューションは、彼が説明するようにうまく使用できない可能性がありますが、必ずしもそうであるとは限りません。賢明な開発者やデザイナーは、スクリプトで生成された css クラスを使用して、本当に必要なものだけを css ファイルに取り込みます。

解決策はまだOPの質問を解決します。

于 2008-08-20T15:31:16.247 に答える
1

これにアプローチするもう 1 つの方法は、何らかの命名規則に従って、HTML で使用する ID とクラス名を標準化することです。

于 2008-08-20T09:21:04.593 に答える
0

HTML と CSS を作成するジェネレーターを作成しました = https://www.andy-howard.com/css-skeleton-screen-generator/

他に言うことはあまりありませんが、css で :empty セレクターを利用しています。

于 2021-04-20T12:46:09.247 に答える