Tutoriales de diseño web

HTML5, CSS3 y JQuery

volver al índice

Resumir código CSS

Escrito por Laura Chuburu

Siempre es conveniente escribir código resumido para lograr un archivo CSS más corto y más liviano. 

Resumir los 4 lados:

Algunas propiedades como el margin, padding, border, hacen referencia a los 4 lados de un elemento (top, right, bottom, left, en ese orden.). Por cada uno de los lados, existe una propiedad específica, por ejemplo: margin-top, margin-right, margin-bottom, margin-left. Pero podemos resumir el código si respetamos el orden de los valores.

Ejemplo 1:

Si tenemos que definir los 4 padding iguales podemos escribir las 4 propiedades o resumir: 

{padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px}
{padding: 20px}

Ejemplo 2:

También podemos escribir los 4 padding distintos 

{padding-top: 40px; padding-right: 25px; padding-bottom: 20px; padding-left: 35px}
{padding: 40px 25px 20px 35px}

Es necesario respetar el orden: top, right, bottom, left:

Ejemplo de padding

Ejemplo 3:

Si tenemos que definir 2 padding de 20px y 2 de 40px, podemos escribir: 

{padding-top: 20px; padding-right: 40px; padding-bottom: 20px; padding-left: 40px}
{padding: 20px 40px}

El navegador reconoce que el primer valor corresponde a top y bottom, y el segundo a left y right.

Ejemplo de padding

Resumir color:

Si un color en sistema hexadecimal se compone de 3 pares de dígitos iguales, los podemos resumir en sólo 3 dígitos, por ejemplo: {background: #330099}, es lo mismo que {background: #309}

Resumir background:

Si queremos usar una imagen de fondo que no se repita y que esté centrada y marginada arriba, podemos escribirla con 3 propiedades separadas o todos los valores en una sola propiedad:

{background-image: url(foto.jpg); background-repeat: no-repeat; background-position: top center;}
{background: url(foto.jpg) no-repeat top center;}

Resumir border:

Para agregar un borde tenemos que definir el grosor, el estilo y el color. Podemos escribir las 3 propiedades o resumirlas:

{border-width: 1px; border-style: solid; border-color: #666}
{border: 1px solid #666}

Licencia Creative Commons
Tutoriales de diseño web por Laura Chuburu se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional.