Cuando estamos creando el css de una página web, en ocasiones no nos preocupamos demasiado si estamos ocupando dos líneas o 4, dejamos demasiados espacios, estilos repetidos,… Y todo esto repercute en la velocidad de la página web, un tema muy importante de cara el posicionamiento en Google.
Con optimizando tu CSS quiero mostrarte malas prácticas que no cuestan nada en hacerlas bien. Todo ello repercutirá en el beneficio de la web y en nuestro prestigio como diseñadores. Haciendo las cosas bien conseguirás incrementar la velocidad de la página y mejor rendimiento web.
Buenas prácticas con CSS y aumenta el rendimiento web
[h3]No crear un estilo para cada posición[/h3]
En los casos de márgenes, paddings, bordes,… si queremos que todos tengan el mismo estilo no es correcto:
margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px;
En este caso, es más correcto insertar:
margin:0;
[h3]Evitar el 0px[/h3]
Siguiendo el caso anterior, si queremos que todo el margen sea de cero píxeles, un fallo muy común es poner:
margin: 0px;
Cuando al ser cero píxeles, es igual que poner cero, pero ojo, solo en el caso de que sea cero, si por ejemplo, es uno, si que hay que indicar 1px. Es recomendable:
margin:0;
[h3]Caso background o similares en una sola línea[/h3]
Si queremos poner un fondo que no se repita, alineado a la derecha y el resto de fondo donde no esté la imagen con color #ddd, el código css sería así:
background-image:url('flecha.gif');
background-repeat: no-repeat;
background-position: right;
background-color:#ddd;
Son 4 líneas y si las agrupamos en uno, decimos lo mismo pero ocupando menos espacio:
background: url(/wp-content/uploads/2013/11/flecha.gif) no-repeat right #ddd;
Pasaría lo mismo con el atributo font.
[h3]Estilos con los mismos atributos[/h3]
Por ejemplo, tenemos h1 y h2 con los mismos estilos, solo les diferencia el tamaño de letra.
h1 {
font-weight: 200;
padding: 0;
color: #333;
margin-top:0px;
letter-spacing: -0.1px;
font-size: 24px;
line-height: 28px;
}
h2 {
font-weight: 200;
padding: 0;
color: #333;
margin-top:0px;
letter-spacing: -0.1px;
}
Sería mejor agrupar los estilos comunes y diferenciar los propios de cada elemento. En el código se puede ver el ahorro considerable de código.
h1,h2 {font-weight: 200;padding: 0;color: #333;margin-top:0px;letter-spacing: -0.1px;}
h1 {font-size: 24px;line-height: 28px;}
[h3]Intentar no repetir estilos de forma innecesaria[/h3]
Este caso sería en el html. Si tenemos tres párrafos que se les aplica el mismo estilo, podrías pensar en ponerlo de la forma:
<p class="coloreo">Primer párrafo</p> <p class="coloreo">Segundo párrafo</p> <p class="coloreo">Tercer párrafo</p>
Para estos casos, es recomendable:
<div class="coloreo"> <p>Primer párrafo</p> <p>Segundo párrafo</p> <p>Tercer párrafo</p> </div>
Así utilizamos un solo estilo que se aplica a todos los párrafos.
¿Eres de los que suele optimizar sus estilos css?
¿Se te ocurreo algún otro caso de errores que solemos cometer los diseñadores al crear los estilos css?
