Strumento per generare scheletro CSS?

Question

Il mio HTML è tutto contrassegnato, pronto a far piovere CSS.Il problema è che devo tornare indietro e scoprire quali sono i nomi di tutti i miei ID e classi in modo da poter iniziare.Ciò di cui ho bisogno è uno strumento che analizzi il mio HTML e generi un foglio di stile con tutti i possibili elementi pronti per essere stilizzati (magari anche con alcuni valori predefiniti).Esiste uno strumento del genere?

Answer 1

http://lab.xms.pl/css-generator/ sembra corrispondere alla descrizione.

Answer 2

Ho una versione povera di questo che ho usato in passato...questo richiede jquery e 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>

ti dà qualcosa del genere:

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

se invece li vuoi nell'ordine di pagina "naturale"...

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

Carico semplicemente la pagina con quello script, quindi taglio e incolla i risultati da Firebug...quindi ovviamente rimuovi lo script :)

dovrai rimuovere i duplicati manualmente o semplicemente inserire una semplice logica di controllo del duplicato con una mappa, un array o qualcosa del genere.uno per gli ID e uno per le classi.

Answer 3

Quando l'ho visto per la prima volta ho pensato: "Bella domanda!Bella risposta, cavolo!"

Dopo averci pensato un po', non sono così sicuro che sia una buona idea.È un po' come generare gestori eventi per tutti i controlli in una pagina ASP.NET o generare procedure CRUD per tutte le tabelle in un database.Penso che sia meglio crearli secondo necessità per due motivi:

1. Meno confusione derivante dalle dichiarazioni di stile vuote
2. Meno tentazione di abusare (o sottoutilizzare) dei CSS scrivendo tutto a livello di classe anziché utilizzare selettori discendenti come (#navigation ul li a).

Answer 4

Sono d'accordo con Jon, ma non vedo alcun problema* nel fare ciò che vuole l'OP.Utilizzando lo script fornito, conosceresti tutte le tue classi e i tuoi ID.Mentre lavori sul tuo CSS, dovresti decidere se tu Bisogno per utilizzare ciascuno di essi.Alla fine, o nel momento in cui ritieni di avere una buona padronanza di ciò che stai facendo, eseguilo tramite un ottimizzatore/compressore in modo da rimuovere ID e classi non utilizzati.

*Ipotesi operativa:O non hai scritto l'HTML originale o l'hai scritto e in seguito hai deciso che "Gosh CSS sarebbe stato davvero carino qui ora, vorrei che avrei iniziato con esso." :-)

Answer 5

Non che non sia una domanda sensata con una risposta sensata, ma per me implicava il tipo di HTML contrassegnato inutilmente che le persone creano quando non capiscono i selettori posizionali:il tipo di codice in cui tutto ha una classe e un 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>

puoi rimuovere tutto tranne l'id sul div ed essere comunque in grado di modellare tutto in base alla sua posizione;e ovviamente la sceneggiatura non ti mostrerà tutto quelli possibili selezionatori, vero?

In altre parole, una focalizzazione ristretta sui CSS come qualcosa che riguarda classi e ID è motivo di preoccupazione.

Answer 6

Questo post sul blog fa riferimento a qualcosa di simile a ciò di cui hai bisogno Qui.

Contiene un collegamento a uno script Perl chiamato 'stilizzatore.pl'.Questo script analizza l'HTML per cercare possibili elementi CSS e li genera in un file.

Answer 7

Un altro modo per affrontare questo problema è standardizzare l'ID e i nomi delle classi che usi nel tuo HTML in base una sorta di convenzione di denominazione.

Answer 8

Non sono d'accordo con Jon.Sebbene questa soluzione possa essere utilizzata male nel modo in cui la descrive, ciò non significa necessariamente che lo farà.Qualsiasi sviluppatore o progettista saggio prenderà le classi CSS generate dallo script e inserirà solo ciò che è realmente necessario nel file CSS.

La soluzione risolve ancora la domanda del PO.