Tool zum Generieren eines CSS-Skeletts?

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

  •  08-06-2019
  •  | 
  •  

Frage

Mein HTML-Code ist vollständig markiert und bereit, CSS herausregnen zu lassen.Das Problem ist, dass ich zurückgehen und herausfinden muss, wie alle meine IDs und Klassennamen lauten, damit ich beginnen kann.Was ich brauche, ist ein Tool, das meinen HTML-Code analysiert und ein Stylesheet mit allen möglichen Elementen ausspuckt, die zum Stylen bereit sind (vielleicht sogar mit einigen Standardeinstellungen).Gibt es ein solches Tool?

War es hilfreich?

Lösung

http://lab.xms.pl/css-generator/ scheint der Beschreibung zu entsprechen.

Andere Tipps

Ich habe eine Version für arme Männer, die ich in der Vergangenheit verwendet habe ...Dies erfordert JQuery und 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>

es gibt dir so etwas:

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

wenn Sie sie stattdessen in „natürlicher“ Seitenreihenfolge haben möchten ...

<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>

Ich lade einfach die Seite mit diesem Skript, schneide dann die Ergebnisse aus und füge sie aus Firebug ein ...Dann entfernen Sie natürlich das Skript :)

Sie müssen die Dups manuell entfernen oder einfach eine einfache Dup-Prüflogik mit einer Karte, einem Array oder etwas Ähnlichem hinzufügen.eine für Ausweise und eine für Klassen.

Als ich das zum ersten Mal sah, dachte ich: „Tolle Frage!“Nette Antwort, verdammt!“

Nach kurzem Nachdenken bin ich mir nicht so sicher, ob das eine gute Idee ist.Es ähnelt ein wenig dem Generieren von Ereignishandlern für alle Steuerelemente auf einer ASP.NET-Seite oder dem Generieren von CRUD-Prozeduren für alle Tabellen in einer Datenbank.Ich denke, es ist aus zwei Gründen besser, sie nach Bedarf zu erstellen:

  1. Weniger Unordnung durch leere Stildeklarationen
  2. Weniger Versuchung, CSS zu missbrauchen (oder zu wenig zu verwenden), indem alles auf Klassenebene geschrieben wird, anstatt abgeleitete Selektoren wie (#navigation ul li a) zu verwenden.

Ich stimme Jon zu, aber ich sehe kein Problem* darin, das zu tun, was der OP will.Mithilfe des bereitgestellten Skripts kennen Sie alle Ihre Klassen und IDs.Während Sie an Ihrem CSS arbeiten, sollten Sie entscheiden, ob Sie brauchen jeden von ihnen zu nutzen.Am Ende oder an dem Punkt, an dem Sie das Gefühl haben, dass Sie Ihre Arbeit gut im Griff haben, führen Sie es durch einen Optimierer/Kompressor, damit nicht verwendete IDs und Klassen entfernt werden.

*Betriebsannahme:Sie haben entweder das ursprüngliche HTML nicht geschrieben oder sie geschrieben und später entschieden, dass "GOSH -CSS jetzt hier wirklich nett wäre. Ich wünschte, ich hätte damit begonnen." :-)

Nicht, dass es keine vernünftige Frage mit einer vernünftigen Antwort wäre, aber es implizierte für mich die Art von unnötig markiertem HTML, die Leute erstellen, wenn sie Positionsselektoren nicht verstehen:die Art von Code, bei dem alles eine Klasse und eine ID hat.

<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>

Sie können alles außer der ID im Div entfernen und trotzdem alles dort nach seiner Position formatieren.Und natürlich zeigt Ihnen das Skript nicht alles diese Mögliche Selektoren, oder?

Mit anderen Worten: Ein enger Fokus auf CSS als etwas, das auf Klassen und IDs angewendet wird, ist besorgniserregend.

Dieser Blogeintrag verweist auf etwas Ähnliches, was Sie benötigen Hier.

Es enthält einen Link zu einem Perl-Skript namens „Stylizator.pl'.Dieses Skript analysiert den HTML-Code, um nach möglichen CSS-Elementen zu suchen, und gibt sie in eine Datei aus.

Eine andere Möglichkeit, dies zu erreichen, besteht darin, die ID- und Klassennamen, die Sie in Ihrem HTML verwenden, entsprechend zu standardisieren eine Art Namenskonvention.

Ich bin anderer Meinung als Jon.Obwohl diese Lösung in der von ihm beschriebenen Art und Weise schlecht genutzt werden kann, bedeutet dies nicht unbedingt, dass dies auch der Fall sein wird.Jeder kluge Entwickler oder Designer wird die vom Skript generierten CSS-Klassen nehmen und nur das, was wirklich benötigt wird, in die CSS-Datei ziehen.

Die Lösung löst immer noch die Frage des OP.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top