Generazione di un foglio di stile basato sullo stile HTML in linea?

Sto lavorando allo styling di diverse parti del mio sito Web per un po ‘, tuttavia devo ancora inserire i miei stili inline in un foglio di stile. Mi stavo chiedendo se esiste uno strumento per analizzare un file HTML e generare un foglio di stile da esso. Ad esempio, ecco uno snippet del mio sito web:

E vorrei essere in grado di generare questo:

 .block { border: 1px solid; } #profile-pic { float: left; border: 0px; } 

Esiste qualcosa come questo?

Qui, ho scritto una funzione per farlo (la specificità non sarà perfetta, ma ti farà iniziare):

 function getInlineStyles() { var stylesList = "", thisElement, style, className, id; $("*", "body").each(function () { thisElement = $(this); style = thisElement.attr("style"); className = thisElement.attr("class"); id = thisElement.attr("id"); if (id !== undefined) { stylesList += " #" + id; } if (className !== undefined) { stylesList += " ." + className; } if (id !== undefined || className !== undefined) { stylesList += "{"; } if (style !== undefined) { stylesList += style; } if (id !== undefined || className !== undefined) { stylesList += "}"; } }); return stylesList; } 

Prova con Firebug. Nella parte CSS hai qualcosa di simile a questo:

element.style {
border: 1px solid;
}

per

Copia questo in .block { } e il gioco è fatto! Non è troppo facile, ma può essere d’aiuto.

No, non esiste uno strumento del genere. Cosa fai quando c’è più di una lezione? O una class e un ID? O un elemento che è figlio di un elemento con un ID?

No, l’HTML deve essere analizzato in questo modo per creare codice CSS efficiente. Dovrai farlo manualmente.

L’approccio generale su questo, è quello di prendere una pagina pesante in-css e scaricarla localmente. Quindi, ribuild la pagina da zero. Il lato positivo è che devi fare il CSS una sola volta. Una volta che hai un foglio di stile globale, il resto delle pagine andrà a posto.