CSSスケルトンを生成するツール?

StackOverflow https://stackoverflow.com/questions/16926

  •  08-06-2019
  •  | 
  •  

質問

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

役に立ちましたか？

解決

http://lab.xms.pl/css-generator/ という説明に当てはまるようです。

他のヒント

私は過去にこれの貧乏人版を持っています...これには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 つはクラス用です。

初めてこれを見たとき、「素晴らしい質問だ！」と思いました。きちんとした答えだよ、ダンブ！」

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

  1. 空のスタイル宣言による混乱の軽減
  2. (#navigation ul li a) のような子孫セレクターを使用するのではなく、すべてをクラス レベルで記述することで、CSS を誤用 (または過小使用) する誘惑が少なくなります。

私は Jon の意見に同意しますが、OP が望んでいることを実行することに問題はありません*。提供されたスクリプトを使用すると、すべてのクラスと ID がわかります。CSS の作業中に、次のことを決定する必要があります。 必要 それぞれを使用します。最後に、または自分のやっていることをうまく理解できたと感じた時点で、オプティマイザー/コンプレッサーを実行して、未使用の ID とクラスを削除します。

*動作前提:あなたは元のHTMLを書いていないか、それを書いて、後で「今ここでは本当にいいだろう、私はそれから始めていたらいいのに」と決めた。 :-)

これは、賢明な答えが得られる賢明な質問ではないというわけではありませんが、位置セレクターを理解していないときに作成される、不必要にマークアップされた 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 以外のすべてを削除しても、その位置に基づいてそこにあるすべてのスタイルを設定できます。そして明らかに、スクリプトではすべてがわかるわけではありません それらの 可能なセレクターですよね?

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

このブログエントリは、必要なものと同様のものを参照しています ここ.

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

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

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

この解決策は依然としてOPの質問を解決します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top