Reduce tus archivos de CSS con el método corto

Si con CSS se reduce la cantidad de peso por página, ¡porqué no reducir las CSS para que pesen menos! El método es relativamente fácil y les aconsejo también que visiten las especificaciones de la W3C.

Hay dos formas de escribir la misma regla de CSS: la estándar y la shorthand. Una es la larga y la otra es la reducida. Vamos a ver un ejemplo:

div {

margin-top: 10px;

margin-bottom: 15px;

margin-left: auto;

margin-right: 20px;

padding-top: 20px;

padding-bottom: 10px;

padding-left: 15px;

padding-right: 20px;

font-family: Verdana, Arial, san-serif;

font-size: 1em;

font-weight: bold;

line-height: 1.4em;

color: #f00;

}

Luego de aplicar la lógica shorthand, queda:

div {

margin: 10px 20px 15px auto;

padding: 20px 20px 10px 15px;

font: bold 1em/1.4em Verdana, Arial, sans-serif;

color: #f00;

}

A que se ha reducido notablemente todo, pues, así es el mundo corto son formas de expresar las formas estándares pero en espacios reducidos. Esto funciona para casi todas las propiedades del modelo de cajas Box Model del CSS. Pero también a otros atributos como el ejemplo font: que modifica las tipografías.

La lógica es simple, si tenemos una caja imaginaria llamada div class=”modelo” y necesitamos que de margen superior tenga 10 píxeles; de margen lateral izquierdo tenga 15 píxeles; de margen inferior tenga 33 píxeles, finalizando con el margen lateral derecho con 22 píxeles tenemos que escribir:

div.modelo {

margin: 10px 22px 33px 15px;

}

Fue fácil, ahora les contaré cómo adivinar qué posición pertenece a qué margen:

div.nombreclase {

comando: arriba derecha abajo izquierda;

}

Como pueden comprobar, la secuencia cubre en la misma dirección de las agujas del reloj, comenzando siempre por arriba y terminando a la izquierda.

Hay otro caso interesante, nos permite reducir aun más una propiedad shorthand. Por ejemplo, si tenemos los 4 lados con la misma propiedad, en vez de escribir:

div.modelo {

margin: 10px 10px 10px 10px;

}

Podemos resumirlo a:

div.modelo {

margin: 10px;

}

Esto genera 10px en cada lado. El navegador siempre interpretará que cada cara tiene que tener 10 píxeles de lado. Seguimos jugueteando con CSS, ahora veremos qué pasaría si ponemos dos valores en vez de uno, tres y cuatro:

div.modelo {

margin: 10px 22px;

}

Aquí el navegador detectará dos valores como margen para una div que tiene una clase llamada modelo, entonces recurriendo a la regla de los lados en sentido a las agujas del reloj el primer valor sería el superior e inferior a la vez y el segundo el derecho y el izquierdo a la vez. Esto quedaría en una caja que tiene un margen superior/inferior de 10 píxeles más un margen de 22 píxeles a la derecha y a la izquierda:

div {

margin: superior+inferior derecha+izquierda;

}

O sea, con dos valores se controlan los lados superiores y los lados verticales.

Con tres valores, el navegador ya tiene que interpretar los dos conceptos: el de las agujas del reloj y el del modo resumido:

div.modelo {

margin: 10px 22px 10px;

}

Aquí el navegador creará interpreta que la div llamada modelo tiene que tener 10 píxeles de margen superior (pero no inferior) más 22 píxeles de margenes derecho e izquierdo y finalizando un margen inferior de 10 píxeles.

div.modelo {

margin: superior derecho+izquierdo inferior;

}

Esta es la mejor forma de reducir CSS cuando se trata de posicionar elementos. Ahora, hay otros toques mágicos, comenzando por las agrupaciones.

Podemos decir que los elementos A, B y C serán de color gris #666, además incluyen la misma tipografía, el mismo interlineado, dando por hecho que los tres tienen muchas características en común, entonces, cualquier paisano escribiría:

A {

color: #666;

font-family: Arial, sans-serif;

font-size: 10pt;

line-height: 18pt;

}

B {

color: #666;

font-family: Arial, sans-serif;

font-size: 10pt;

line-height: 18pt;

}

C {

color: #666;

font-family: Arial, sans-serif;

font-size: 10pt;

line-height: 18pt;

}

Pero como buen paisano se dá cuenta de la similitud de estos elementos y los agrupa en uno:

A, B, C {

color: #666;

font-family: Arial, sans-serif;

font-size: 10pt;

line-height: 18pt;

}

Esto es un grupo. Cada elemento está separado por una coma ”,” y un espacio. Algunos navegadores interpretan mejor este sistema (A, B, C) y otros sin espacios no tienen problemas también (A,B,C), recomiendo siempre separar con un espacio para no crear confusiones y evitar malentendidos entre navegadores.

Terminando el ejemplo, vamos a aprender también como se manejan las tipografías.

Mientras que A, B y C tienen la misma tipografía. Conviene usar el método corto para especificarlas:

A, B, C {

color: #666;

font: 10pt/18pt Arial, sans-serif;

}

Esto se traduce en estos pasos: tamaño de tipografía, contra-barra, interlineado, espacio, tipografías. Esto da a entender que las tipografías deben ser normales y no negritas:

A, B, C {

color: #666;

font: normal 10pt/18pt Arial, sans-serif;

}

Si van a hacer normales, no hace falta indicarlo en la linea, pero si tiene que ser negrita por ejemplo, conviene poner:

A, B, C {

color: #666;

font: bold 10pt/18pt Arial, sans-serif;

}

Entonces la secuencia seria: peso inclinación tamaño/interlineado tipografías;. Esto podría traducirse en este ejemplo:

A, B, C {

font: bolder italic 12pt/24pt “Courier New”, Courier, monospace;

}

Hay más ejemplos shorthands y trucos. Están para los bordes, backgrounds etc. Les recomiendo que terminen de aprender a toda perfección en una especificación del W3C, ahí tendréis toda la información exacta atributo que soporta el método resumido.