Técnica del Reloj en CSS

Los desarrolladores web, en su mayoría lo que trabajan del lado del cliente (Frontend), debemos lidiar con las útiles Hojas de Estilo en Cascada o CSS. Recordemos que hay muchas propiedades que se pueden aplicar aun selector HTML o a una etiqueta, y que estas propiedades tiene algunas ligeras variaciones para algunos casos muy particulares como cuando se quiere estilizar un borde, un margen, padding o similares. Me refiero a esas propiedades que cuentan con valores en ciertas posiciones: arriba, derecha, abajo izquierda.

Sucede que en la mayoría de los casos haríamos algo así para aplicar diferentes valores a un padding para algún elemento contenedor:

.box{
padding-top: 10px;
padding-right: 8px;
padding-bottom: 9px;
padding-left: 7px;
}

O también es posible que incluyamos todos los valores en una sola línea siguiendo el orden arriba, derecha, abajo, izquierda para cada valor:

.box{
padding: 10px, 8px, 9px, 7px;
}

Pero, ¿y sí solo necesitamos estilizar algunos lados y no todos? Esta bien, escribes el código como en el primer ejemplo y solo escribes las líneas de los lados que interesan, sin embargo, en este mundo de la programación lo mejor, en ocasiones, es usar menos líneas de código o usar los mecanismos que los lenguajes nos ofrecen para crear software de calidad. Entonces, ¿cómo lograr eso que se pide en una sola línea? Sencillo, usando la técnica del reloj. Veamos.

La Técnica del Reloj CSS

Mediante esta técnica podemos estilizar los margenes, espaciado(padding) o bordes en una sola línea y con poca confusión. Para ello tenemos en cuenta que las horas 12, 3, 6 y 9 equivalen a las posiciones arriba, derecha, abajo e izquierda, respectivamente.

clockAhora, si quisiéramos estilizar solo tres posiciones, tendríamos algo como la siguiente imagen:

clock-threePara solo dos posiciones:

clock-twoY, finalmente, todos los lados en una misma línea:

clock-oneLa idea de esta técnica es facilitar mucho la escritura de código CSS. Con esto hacemos archivos menos cargados de líneas, más legibles y actualizables.

Como todo lo que aquí se postea, que quede para la posteridad y que sea de utilidad.

Fuente: CSS Blog

Anuncios

Autor: cesc1989

Ingeniero de Sistemas que le gusta escribir y compartir sobre recursos que considera útiles, además que le gusta leer manga y ver anime.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s