Deshazte del CSS en línea en tu HTML

Find
Uploaded with plasq’s Skitch!

Si te llegaras a encontrar en la muy hipotética situación en la que alguien te envía un gran archivo de HTML para que lo embellezcas y descubres con horror que está lleno de in-line css y casi estás al borde del llanto ante la perspectiva de tener que quitarlo todo a mano, uno por uno, a las 2:53 de la madrugada después de un día ajetreado. ¡No te preocupes! si tu editor de texto (el mío es textmate) permite hacer búsquedas/reemplazos utilizando expresiones regulares, entonces probablemente puedas buscarlas usando la siguiente:


(style=([^>]+))

Y listo, solo falta que las remplaces con una cadena vacía. Cabe destacar que esto solo funcionará correctamente cuando el atributo style sea el ultimo del tag como en

<p class="red_paragraph" style="background:#FF0000;color:#FF6634"> [...] </p>

pero no funcionará si los atributos son al revés

<p style="background:#FF0000;color:#FF6634" class="red_paragraph"> [...] </p>

Pero como este no era el caso, no me preocupé en refinar mi expresión, después de todo eran las 2:53 de la madrugada y aun tenía que terminar de diseñar una pagina para la mañana siguiente. Pero si ustedes no saben nada de expresiones regulares y quieren aprender, yo les recomiendo que comiencen por este sitio donde explican muy bien de que va todo este rollo.