Cuando escribimos estilos, después de que el CSS de la página haya sido modificado para varias versiones, es posible que algunos estilos ya no se utilicen, o que algunos estilos hayan sido renombrados y los originales se hayan olvidado de eliminar. En resumen, puede que haya algunos inútiles. contenido en el estilo de la página. Estos desperdicios inútiles de espacio en el servidor y consumo de ancho de banda también aumentarán nuestros costos de mantenimiento. Entonces, ¿hay alguna forma de limpiar esos estilos inútiles? Hoy echemos un vistazo a algunas de las herramientas más útiles.
Selectores Dust-Me
Dust-Me es un complemento de Firefox muy útil y fácil de usar. Puede analizar todos los archivos CSS llamados en su página y analizar aquellos que no se utilizan en la página.
Admite archivos de estilo locales y remotos, incluidos archivos de estilo introducidos mediante etiquetas <link>, instrucciones de procesamiento <?xml-stylesheet?>, declaraciones @import, etc. (pero no admite bloques <style> ni estilos en línea en la página)
Admite archivos de estilo introducidos en comentarios condicionales de IE;
Puede consultar una sola página o el sitio web completo;
Admite selectores CSS1, la mayoría de selectores CSS2 y CSS3;
Comprenda que los trucos de CSS comunes como "* html #fuck-ie" se interpretarán como "html #fuck-ie";
Soporta Firefox 3.5 y Firefox 3.0. De hecho, gracias a las mejoras en el motor js de FF 3.5, el rendimiento en FF 3.5 es un 50% mayor que el de FF 3.0.
Instalación: Haga clic aquí. Al mismo tiempo, puede descargar el código fuente del proyecto. Para obtener más información, visite la página oficial del selector Dust-Me.
Velocidad de página
Page Speed es una herramienta de análisis de rendimiento de front-end proporcionada por Google. Es algo similar a YSlow, pero proporciona algunas herramientas más exclusivas y útiles, como Eliminar CSS no utilizado:
Page Speed, al igual que YSlow, se basa en Firebug. Para obtener detalles e instalación, visite aquí.
Comprobador de redundancia CSS
CSS Redundancy Checker es una aplicación en línea gratuita que puede verificar todas las páginas que usan un determinado archivo CSS en busca de estilos inútiles. Puede comprobar el uso de un determinado estilo en varias páginas al mismo tiempo. La desventaja de esta herramienta es que, aunque puede verificar varias páginas HTML a la vez, solo puede verificar un archivo CSS a la vez y debe ingresarlo manualmente:
IDEA IntelliJ
IntelliJ IDEA Este es un IDE bastante poderoso, similar a DreamWeaver, pero no se usa mucho en China. El software incluye una herramienta de análisis de código sobre la marcha que puede analizar clases e identificadores no utilizados en archivos CSS.
Web de expresión
Expression Web, la herramienta de desarrollo de sitios web de nueva generación de Microsoft, todavía es utilizada por muchas personas. Su función de Informe CSS puede verificar el CSS no utilizado que debe borrarse (de hecho, nunca he usado EW para desarrollar un sitio web. Espero que los niños que usan este software puedan hacerlo). ayuda. Mira esto).
Conclusión
Por supuesto, puede haber otras herramientas que no se mencionan aquí. Si sabes algo al respecto, puedes compartirlo con todos.
Además, generalmente escribimos los estilos de todo el sitio web en uno o más archivos de estilo y luego los llamamos todos en la página o los llamamos en módulos. Luego, es posible que los estilos de un determinado archivo CSS no se utilicen en una determinada página, pero. se usan en una determinada página y se usan en otras páginas, por lo que al usar estas herramientas para detectar estilos redundantes en archivos CSS, debe tener cuidado al borrar los estilos, por lo que los resultados de la verificación proporcionados por Page Speed pueden verse afectados por otras páginas. solo se aplica a una sola página, no es adecuado para todo el sitio web; en su lugar, utilice Dust-Me o CSS Redundancy. Al utilizar Checker, puede consultar todo el sitio web o varias páginas del sitio web al mismo tiempo, lo que puede evitar errores.
PD: Muchas gracias al trabajo de Knowledge Capsules.