Texto original vía: 9 consejos para archivos CSS más pequeños y optimizados
Autor|Autor: Stefan Vervoort
Traducción|Traducción: Luc
Dado que los archivos CSS se cargan en el encabezado de la página web, cada visitante descarga estos archivos. Optimizaremos archivos e imágenes PHP, pero a menudo ignoraremos los archivos CSS. Hoy deberíamos pensar en este problema y hacer algo al respecto.
Es posible optimizar CSS utilizando optimizadores de CSS, pero creo que tanto la eficiencia como la potencia mejorarán si escribe su código utilizando las técnicas que se mencionan a continuación.
La optimización de los archivos CSS también puede ahorrar tráfico y aumentar la velocidad de carga de la página.
1. Comentarios Los comentarios son particularmente útiles al escribir CSS para que los colegas que trabajan juntos comprendan el significado del código. Hay muchas formas de realizar anotaciones; puede utilizar los siguientes métodos:
/*-------------------*/
/*-----Comentario-------*/
/*-------------------*/
También puedes utilizar el siguiente método:
/*Comentario*/
Esto ahorra 20 caracteres y, suponiendo que haya 15 comentarios, ahorra 300 caracteres.
2. Códigos de color abreviados Los códigos de color se definen con códigos HEX, que contienen 6 caracteres, pero en algunos casos se pueden utilizar 3 caracteres en su lugar. Mira el siguiente ejemplo:
div{ color: #ffffff } /* Código corto: color:#fff */
div{ color: #ff88ff; } /* Código corto: color:#f8f */
div{ color: #f8f7f2 } /* No es posible ningún código corto */
3. Fusionar elementos Por ejemplo, si hay un montón de elementos como h2, h3 y h4, y todos tienen los mismos atributos y solo algunos atributos son diferentes, entonces puedes escribirlo de la siguiente manera:
h2, h3, h4. {
relleno: 0;
margen:0;
color:#333;
espacio entre letras: .05em;
espacio entre palabras: 0,1 em;
}
h2{ tamaño de fuente: 1,2 em }
h3{ tamaño de fuente: 1,1 em }
h4{ tamaño de fuente: 1em }
Esto fusiona elementos con los mismos atributos y declara diferentes atributos de tamaño de fuente. Puede ahorrar mucho espacio.
4. Cuando el valor es 0, se omite Out Px/Em/%.
0 no requiere Px, Em ni signo de porcentaje. Cuando su valor es 0 (que supongo que usará), omitir la unidad guarda el doble de caracteres.
div{relleno: 0px 5px 5px 10px }
/* Abreviatura: relleno: 0 5px 5px 10px */
5. Fusionar atributos Algunos atributos como el relleno, el margen y el borde se pueden escribir por separado. Por ejemplo: padding-top, padding-right, padding-bottom y padding-left.
Si es posible, combínalos para que sea más fácil escribirlos y ahorrar espacio.
div{
relleno-izquierda:0 ;
relleno superior: 50 px;
fondo de relleno: 23px;
relleno-derecha: 4px;
/* Abreviatura: relleno:50px 4px 23px 0 */
Si los valores superior e inferior son iguales y los valores izquierdo y derecho son iguales, puedes escribir:
div{
relleno superior: 5px;
fondo de relleno: 5px;
relleno-izquierda:0 ;
relleno-derecha: 0px;
/* Abreviatura: relleno:5px 0 */
6. Elija sabiamente clases/identificación
Las clases y los nombres de identificación seleccionados deben ser lo más breves, fáciles de entender y significativos posible.
Evite elegir nombres como "HeaderMiddleLeftCategories", utilice "h-cats" en su lugar. Esto salva muchos personajes.
7. Limpie los archivos CSS para ahorrar espacio. Cuando se utiliza CSS para crear un sitio web, el código escrito puede funcionar o no y ocupa mucho espacio. Los archivos CSS deben revisarse en todo momento para detectar errores y códigos no válidos para ahorrar espacio.
8. Elimina el punto y coma del último atributo en el selector. Este es un truco que descubrí usando el compresor CSS. Mira este ejemplo:
cuerpo{
antecedentes:#ccc;
color:#333;
/* Código corto: color:#333 */Mira, eliminé el último punto y coma. Puede que el efecto no sea obvio, pero un poco suma 50 selectores son 50 caracteres.
9. Elimine los espacios y retornos de carro inútiles. Es posible que desee eliminar todos los espacios y retornos de carro porque ocupan un carácter. Pero el problema con esto es que destruye la estructura de CSS y reduce la legibilidad.
Normalmente no hago esto cuando optimizo archivos CSS porque la estructura es más importante para mí. Aquí hay un compromiso: use archivos en el sitio web que no contengan retornos de carro ni espacios. Guardar archivos que contienen retornos de carro y espacios localmente hace que la edición sea muy conveniente.
Conclusión Si desea optimizar completamente los archivos CSS, le recomiendo utilizar el compresor CSS, para que pueda aprender las habilidades anteriores usted mismo y mejorar la velocidad de escritura y la calidad del código CSS.
Si tiene otros consejos, deje un mensaje.