Aprender a escribir CSS limpio y optimizado requiere mucha práctica y un imparable deseo compulsivo de pulcritud. Mantener su CSS ajustado y ordenado no se trata solo de alimentar su necesidad psicológica loca de limpieza, sin embargo, en el caso de sitios web particularmente grandes, la recompensa es una carga más rápida de las páginas. Los tiempos de carga más rápidos equivalen a una mayor facilidad de uso y una mayor satisfacción del usuario.
Esta publicación examinará varias técnicas que puede utilizar para optimizar su CSS, así como varias herramientas en línea que pueden comprimir automáticamente su código.
Comprimir o no comprimir
Antes de entrar en cómo comprimir su CSS, se debe tener en cuenta que a menudo hay un compromiso entre el código comprimido y el código fácil de leer. Muchos programadores se enorgullecen de la organización evidente en su CSS y no sueñan con ponerlo a través de compresores que eliminan comentarios y saltos de línea. Como diseñador web, debes analizar tus objetivos para el código que escribes. Si está creando un sitio web pequeño que solo requiere unas pocas líneas de CSS, es posible que no haya necesidad de compresión adicional. Además, si está escribiendo un código que debe compartir con un equipo de programadores, insertar comentarios adicionales y saltos de línea puede ahorrarle mucho tiempo a sus colegas y acumular una gran gratitud. Sin embargo, si está diseñando un sitio web grande que requiere toneladas de CSS, definitivamente desea mantener un ojo en el tamaño de su archivo y hacer lo que pueda para mantenerlo bajo control.
Puede tomar un tiempo encontrar la combinación perfecta entre compresión y legibilidad, pero vale la pena buscar ambos y lograr ese equilibrio puede facilitar mucho su trabajo. Además, definitivamente no es el caso que la compresión siempre resulte en una reducción de la legibilidad. Muchas técnicas que puede utilizar para comprimir su código darán como resultado un código mejor y más organizado.
Con eso en mente, comencemos con algunas técnicas para mantener el tamaño de su archivo CSS al mínimo.
Bloques de estilo vacíos
Vamos a empezar con lo obvio. Si tienes un bloque de estilo sin nada en él, tíralo. Tampoco te quejes sobre cómo podrías usarlos más tarde, son solo un desorden y lo sabes. No lo agregues a menos que tengas una razón para hacerlo.
Taquigrafía
CSS Shorthand es un método para combinar varias líneas de CSS en un solo comando. Hacer un hábito de usar todos los trucos abreviados que conoce puede reducir drásticamente las líneas de código que escribe a largo plazo. Aquí hay un ejemplo:
Versión larga:
Versión abreviada:
Para obtener más trucos abreviados de CSS, visite el artículo a continuación.
CSS Sprites
La idea básica detrás de los sprites CSS es reducir la cantidad de solicitudes HTTP para acelerar los tiempos de carga de la página. La forma en que los sprites logran esta hazaña es mediante la combinación de varias imágenes en una sola imagen, comúnmente en un formato de cuadrícula. Cada imagen individual se muestra desplazando la posición de fondo de la imagen más grande. Para una descripción más detallada de CSS Sprites, consulte el tutorial de Chris Coyier en CSS-Tricks:
Reducción de comentarios
Me encanta rellenar mi código con comentarios. Cuantos más comentarios lo coloque, más rápido puedo clasificar visualmente las diferentes secciones del código. Sin embargo, si va por CSS altamente optimizado con una huella pequeña, los comentarios excesivos pueden consumir valiosos KBs. Intente eliminar cualquier comentario innecesario y reformatear aquellos que debe mantener en el menor número de caracteres posible.
Familias de fuentes razonables
Cuando el tamaño del archivo es un gran problema, no coloque sus familias de fuentes al máximo con alternativas. Cortar toda la grasa innecesaria y recortar sus opciones adicionales a uno o dos.
Antes de:
Después:
Usa colores hexagonales
Para reducir caracteres, convierta cualquier valor RGB a sus equivalentes hexadecimales. Esto puede parecer trivial, ¡pero cada personaje cuenta!
Antes de:
Después:
Eliminar los saltos de línea
Ir a través de cada bloque de estilo y eliminar retornos duros innecesarios. También puedes deshacerte del último punto y coma.
Antes de:
Después:
10 compresores de CSS en línea
Los compresores CSS automatizan gran parte del trabajo de limpieza de su código. Muchos de ellos le dan el porcentaje por el cual se ha reducido el tamaño de su archivo, así que asegúrese de probar algunos para ver cuál es el mejor.
CSS Drive
Opciones:
- Modo de compresión: Light, Normal o Super Compact
- Eliminación de comentarios: ninguno, todos, o aquellos más largos que una longitud especificada
Compresor CSS
Opciones (Elija Sí o No para cada una):
- Ordenar propiedades
- Comprimir colores
- Comprimir el peso de la fuente
- Selectores minúsculas
- Eliminar los Backlashes innecesarios
- Eliminar puntos y comas innecesarios
Arantio
Opciones (Elija Sí o No para cada una):
CSS Optimizer
Opciones:
- No eliminar saltos de línea (Sí o No)
- Obtener CSS de URL, archivo o texto pegado
Lotería de correos
Opciones: Ninguna
CSS limpio
Opciones (Elija Sí o No para cada una):
- Seleccionar selectores
- Ordenar propiedades
- Optimizar los selectores y sus propiedades (0, 1 o 2)
- Fusionar propiedades de taquigrafía
- Sólo optimizaciones seguras
- Comprimir colores
- Comprimir el peso de la fuente
- Selectores minúsculas
- Estuche para Propiedades (Minúsculas de UpperCase)
- Eliminar barras invertidas innecesarias
- Convertir! Importante-hack
- Eliminar el último
- Guardar Comentarios
- Descartar propiedades inválidas (CSS2.1, CSS2.0 o CSS1.0)
- Salida como archivo
Pingates
Opciones (Elija Sí o No para cada una):
- Convertir nombres de colores largos a hexadecimal
- Convertir códigos hexadecimales largos en códigos hexadecimales cortos
- Convertir hexágonos largos a nombres de colores
- Convertir RGB a hexadecimal
- Eliminar cero medidas
- Combina reglas idénticas
- Combinar selectores idénticos
- Combinar propiedades
- Eliminar propiedades sobrescritas
- Eliminar valores inútiles de márgenes y relleno
- Mostrar estadísticas
- Salida en color
- Salida utilizando el tamaño más pequeño
PHP Insider
Opciones: Ninguna
Siete cuarenta
Opciones:
- Opciones de descanso: 500, 1000, 1500 o 2000
Columna de la página
Opciones: Ninguna
GZIP
A pesar del sitio web horriblemente feo, GZIP es una herramienta increíblemente útil para comprimir muchos tipos de código. No es el método de compresión más fácil de descifrar y puede ser confuso para los principiantes. Echa un vistazo a este tutorial para obtener más información sobre cómo GZIPPING tu CSS.
Conclusión
Como dije antes, muchos de estos métodos pueden parecer demasiado entusiastas e insensatos. El truco es mirar el panorama general. Aunque cualquiera de estos consejos puede tener un efecto casi insignificante, la combinación de varias o todas estas técnicas puede tener un gran impacto en el tamaño del archivo de su CSS. Use los comentarios a continuación para hacernos saber qué métodos de compresión / optimización utiliza y por qué.