style - link css to html

Limpiador CSS

Question

Me hice cargo de un sitio bastante complejo desarrollado por otra compañía, y francamente es un desastre. Uno de mis problemas es que parece que no ha habido disciplina al escribir el html, por lo que aunque han utilizado css extensamente, hay media docena de archivos css y un análisis superficial revela que hay una cantidad significativa de estilos en los archivos css. que no están referenciados por ninguno de los html, sino que contienen un rastro de inicios de falso rediseño y estilos antiguos, ahora redundantes, mezclados con los elementos actuales.

Realmente me gustaría limpiar todo esto antes de seguir adelante. ¿Existe alguna herramienta, de código abierto o de otro tipo, que pueda tomar un grupo de archivos html y css y hacer una referencia cruzada para resaltar el fragmento en el CSS?

Answer 1

Cuando tiene el CSS organizado en las hojas de estilo separadas, puede ejecutar el código a través de una herramienta en línea para ordenar el diseño. Pruebe uno de estos:

• http://www.lonniebest.com/FormatCSS/
• http://www.cleancss.com/index.php
• http://www.cssdrive.com/index.php/main/csscompressor/

Answer 2

dust me selectors tiene casi la misma funcionalidad que mi limpiador jquery css .

y se ve genial

puedes usar mi complemento si no tienes Firefox.

Answer 3

Prueba el complemento Dust me Selectors para Firefox.

Answer 4

¡Creo que hay! Y lo estoy usando todo el tiempo. De hecho, hay 2 y voy a compartirlos con ustedes.

1. Si desea generar CSS automáticamente desde el marcado en línea de forma gratuita, entonces necesita esto: http://beecss.theextremewebdesigns.com/

2. Si ya tiene (desordenado) CSS y desea limpiar / minificarlo en línea de forma gratuita, entonces necesita esto: http://beecss.theextremewebdesigns.com/css_clean_css_minify/

Prefiero las herramientas anteriores porque ya evalué otros productos de limpieza y encontré que los otros carecen de funcionalidad en algunos aspectos. Por ejemplo, algunos de los limpiadores ignoran totalmente las clases múltiples o simplemente toman la primera clase. Se olvidan de que la siguiente clase anulará los estilos de la primera clase y, por lo tanto, es muy importante tener todos los selectores y clases generados y disponibles en primer lugar. ¡Solo encontré BeeCSS - CSS Generator haciendo un trabajo INCREÍBLE en esto! Desde entonces, he marcado el BeeCSS CSS Generator y BeeCSS Cleaner Minifier y los uso en todos mis proyectos. Los recomiendo a los dos.

Según mi experiencia, tengo esta solución para ti.

1. Simplemente copie su HTML a una nueva página HTML y guárdelo. Luego cargue esta página HTML en http://beecss.theextremewebdesigns.com/ . Eso le dará solo los selectores y las clases que realmente se utilizaron en el documento. Entonces, si tienen estilos redundantes en los archivos CSS, puede deshacerse de ellos fácilmente de esta manera.

2. Luego, simplemente busque las clases y los selectores que BeeCSS generó en su archivo CSS original y copie esos estilos al nuevo CSS generado por BeeCSS. De esta manera, se asegurará de que su CSS ahora solo tenga los estilos que está utilizando el documento HTML.

3. Después de todo el proceso de copiar y pegar que hizo en el paso anterior, encontrará que la apariencia de los estilos en el CSS puede ser desordenada. NO empiece a limpiarlos manualmente. Quiero decir, no intente arreglar las pestañas, espacios, etc. Simplemente copie todos los estilos tal como están en BeeCSS - Cleaner Minifier en http://beecss.theextremewebdesigns.com/css_clean_css_minify/ y luego presione "Clean CSS" botón. Eso debería darte el resultado final. Contendrá solo los selectores y las clases que realmente se usaron en el documento HTML. Si desea reducir el tamaño del CSS, simplemente genere la versión minificada de su CSS "Nuevo" copiando los estilos en el Miniifer Cleaner de BeeCSS y presione el botón "Minify CSS".

Los anteriores son los pasos que sigo cuando trabajo en mis proyectos y funcionan absolutamente bien para mí. La maravilla de BeeCSS reside en el hecho de que tanto el CSS Generator como el Cleaner Minifier son totalmente gratuitos y fáciles de usar, y puedes generar / limpiar CSS en línea en pocos segundos. No necesita instalar extensiones, aplicaciones, etc. Por lo tanto, no cargará su navegador con extensiones torpes ni tendrá que esperar durante horas para finalizar el proceso. Lo harás en segundos si sigues mis instrucciones (a excepción de la parte de copia de estilos)

Espero que ayude.

Answer 5

Hay un nuevo escáner CSS en sourceforge. Busca códigos css, html, aspx, php, javascript y jquery para los selectores y clases de css / stylesheet usados ​​y no utilizados. Puede ser exactamente lo que quieres. Se está ejecutando bajo Windows (ya que es el código .net). Esta es su URL si desea echar un vistazo: http://sourceforge.net/projects/cssscanner/