11 herramientas útiles para verificar, limpiar y optimizar su archivo CSS

La minimización del tamaño de archivo de la hoja de estilo CSS ha sido considerada por muchos como una buena manera de aumentar la velocidad de carga de su sitio. De hecho, al reducir el archivo CSS en varios kilobytes, el servidor tardará más tiempo en cargarse y dará como resultado una página web más rápida..

En el caso de que sus artículos lleguen a la página principal de Digg, este también podría ser uno de los pocos factores decisivos (hay muchos más) ya sea que su servidor se bloquee o no..

Algunos de los métodos más comunes utilizados para minimizar / optimizar una hoja de estilo CSS incluyen eliminar los selectores no utilizados, los espacios en blanco no deseados, las pestañas, los comentarios y cambiar la declaración a mano alzada a las notaciones abreviadas.

Sé que algunos de ustedes aquí no son lo suficientemente expertos en tecnología para editar su propio código CSS, por lo que aquí les proporcionaré algunas de las herramientas útiles que puede utilizar para optimizar su código CSS, incluso si no tiene conocimiento completo de Codificación CSS.

Revisa tu código CSS

Validador CSS del W3C

El validador de CSS del W3C es una herramienta que puede utilizar para validar su CSS. Puede descargar el validador de Java en su computadora y usarlo sin conexión, o usar el formulario en línea para verificar su código CSS.

CSS Validator Firefox Add-On

Para facilitar la validación de su código CSS, existe esta extensión de Firefox, el Validador de CSS, que puede instalar en su navegador. Una vez instalado, puede revisar su código de manera fácil y rápida con un clic derecho del mouse.

CSSCheck

Aunque su código CSS está validado, no significa que esté libre de error. La validación solo significa que cumple con los estándares CSS establecidos por el W3C. Si desea validar y analizar algunos problemas de compatibilidad del navegador con su hoja de estilo, entonces CSSCheck es una buena herramienta para usted..

Analizador de CSS

CSS Analyzer es una herramienta útil que le permite validar su hoja de estilo en comparación con el estándar del W3C, realizar una prueba de contraste de color y una prueba para garantizar que los tamaños relevantes se especifican en unidades de medida relativas.

En caso de que se lo pregunte, la prueba de contraste de color es para verificar que las combinaciones de colores de primer plano y de fondo proporcionen suficiente contraste cuando alguien con déficit de color lo vea, o cuando lo vea en una pantalla en blanco y negro..

Limpia tu código CSS

Selectores de Dust-Me

Dust-Me Selectors es una extensión de Firefox que encuentra selectores de CSS no utilizados en la página que está viendo. Al probar las páginas subsiguientes del mismo dominio, el resultado se verifica de forma cruzada con los datos anteriores y los selectores encontrados se tachan de la lista. Puede usarlo para probar páginas individuales u obtenerlo en todo el sitio..

Al final, recibirá un informe sobre los selectores que no se utilizan en ninguna parte del sitio. Luego puede eliminar esos selectores de su hoja de estilo (un código menor significa un tamaño de archivo más pequeño).

Comprobador de redundancia de CSS

Similar a los selectores de Dust-Me, esta herramienta revisa su sitio en busca de selectores de CSS redundantes y no utilizados. Lo único diferente es que necesita ingresar manualmente el URI para cada página que desea probar.

Optimiza y Comprime tu código CSS

Una vez que haya completado la verificación de la validez de su CSS y haya limpiado un código innecesario, es hora de optimizar el archivo CSS y reducirlo al tamaño más pequeño posible.

CSS Tidy

CSS Tidy es un software de código abierto que puede utilizar para optimizar y comprimir su archivo CSS. Está disponible en formato .exe (solo Windows) y en formato de script php comprimido (todas las plataformas, para desarrolladores web). Lo que hace CSS Tidy es principalmente eliminar el comentario, los espacios en blanco innecesarios y cambiar parte del código a taquigrafía. Durante la compresión, puede elegir entre la legibilidad del código o la compresión máxima. Dependiendo de la longitud de su código, puede lograr fácilmente una relación de compresión de hasta el 30% o más.

Dado que CSS Tidy es un proyecto de código abierto, ha habido varios sitios web que usan el código y lo convirtieron en una herramienta en línea para que la gente lo use. Éstos son algunos de ellos:

• CSS limpio
• Code Beautifier
• CSS Formatter y optimizador de CSS Portal

Otros optimizadores de CSS

FlumpCakes CSS Optimizer

Un simple optimizador que viene con varias opciones para que elijas.

Robson CSS Compressor

Si bien puede parecer lo mismo que otros, he encontrado que la tasa de compresión de Robson CSS Compressor es la más alta de todas. Aunque viene con varias opciones para que modifiques la configuración, dejar todas las opciones intactas (todas las opciones marcadas) siempre produce el mejor resultado..

CSS Drive CSS Compressor

El Compresor CSS ofrecido por CSS Drive viene en dos modos que puede usar: Regular y Avanzado. En el modo Regular, solo necesita seleccionar el nivel de compresión que desee (Luz, Normal o Súper Compacto) y el Compresor CSS hará el resto. En el modo Avanzado, se le ofrecen más opciones y una mayor opinión sobre cómo desea que se optimice su hoja de estilo..

CSS Optimizer

El CSS Optimizer de mabblog.com es una aplicación de línea de comandos para Mac y Linux. Está destinado a aquellos que se sienten más cómodos con el terminal que con una interfaz en línea. También hay una versión en línea simple disponible para aquellos que desean obtenerla rápidamente y hacerlo con.

Esperemos que las herramientas enumeradas aquí sean suficientes para que pueda modificar y optimizar su hoja de estilos CSS. Si ha utilizado alguna otra herramienta que sea más útil que las mencionadas anteriormente, compártalas con nosotros en los comentarios.

Explorar más sobre: ​​Diseño web, Desarrollo web, Herramientas para webmasters.