Sto facendo alcuni web-dev e i designer tagliano ed esportano da Photoshop. Il codice generato è orrendo. La prima cosa che sto facendo è prendere tutto dai tag e inserirli nei file CSS. Quindi mi stavo chiedendo se ci fosse uno strumento in grado di automatizzare questo?tag html allo strumento css
vorrei scrivere la mia sceneggiatura, qui si può prendere qualche spunto:
questo fa il contrario, ma se Ti piace Ruby, potrebbe essere Puoi studiare il c ode: cerca premailer su github, usa la gemma Hpricot.
Naturalmente, se non si vuole spendere il tempo di codifica È possibile utilizzare tidy:
tidy -clean your-crap-inlined-file.html
Se la vostra-merda-inline-file.html contengono: <p style="color:red;"> Some TEXT ...</p>
lo rimpiazza l'inserimento di qualcosa di simile
<style type="text/css">
/*<![CDATA[*/
p.c1 {color:red;}
/*]]>*/
</style>
sulla parte superiore del file e, allo stesso tempo sostituire il tuo codice inline con:
<p class="c1">Some TEXT ...</p>
HTML Tidy è un ottimo strumento. Non farà esattamente quello che vuoi, ma potrebbe essere un buon inizio se stai usando l'html generato. Ecco un'istanza online: http://infohound.net/tidy/
Questo sarebbe uno strumento interessante.
Credo che la mia prima domanda sarebbe: il codice Photoshop sta diventando semantico? IE. ci sarà uno <H1> come argomento principale .. e <p> per i paragrafi ecc.
Quindi quando si tratta di css .. sicuramente non creerai codice di qualità facendo questo. Comunque mi sembra, come se tu non fossi davvero una persona di Front End. Ciò rende ogni risposta più difficile ..
Risposta migliore: codice della mano .. il codice sarà migliore. Prossima risposta: codifica manuale della domanda? ci sono alcune altre opzioni.
Un buon tutorial è here .. tuttavia, è fondamentalmente utile per il codice mano.
Vuoi dire, per esempio, prendendo ' blah 'e sta emettendo una regola CSS che corrisponderà a quella particolare estensione e definirai quelle regole nel CSS (piuttosto che nell'attributo' style')? Sarebbe abbastanza bello, ma un grosso caso di utente che avverta, dal momento che se gli elementi in questione non hanno ID, questo sarà * molto * fragile, dipendente dalla specifica struttura HTML e interrotto se si modifica la struttura praticamente del tutto. .. –
@TJ: Potrebbe voler aggiungere automaticamente nomi di classi. – SLaks
@SLaks: Questa è una buona idea, anche se spargere ovunque nomi di classi (in particolare quelli mirati a elementi specifici) non è necessariamente un miglioramento rispetto all'uso di 'style'. Ma hey, è un inizio, che dal suono di tutto ciò che sta cercando. –