Tips, Uso de propiedades abreviadas o shorthand en CSS

shorthands CSS o Abreviaturas en el código CSSEn esta oportunidad vamos a ver lo que conocemos como Shorthand en CSS. Esto realmente no es algo del otro mundo ni una técnica súper secreta que hacemos cuando escribimos CSS, esto es algo que podemos llamar básico pero que a su vez nos trae muchos beneficios a la hora de escribir nuestro código CSS. Hablamos de los Shorthands o Shorcuts de CSS.

Los Shorthand son las propiedades CSS que le permiten establecer los valores de otras propiedades CSS simultáneamente. El uso de una propiedad resumida, un desarrollador web puede escribir hojas de estilo más legibles más concisas y, a menudo, ahorrando tiempo y energía.

En este tips veremos cómo hacer que las páginas se cargan más rápido usando las propiedades resumidas o Shorthand  de CSS para los backgrounds, borders, border-radius, colors, fonts, lists, margins, padding..etc.

La especificación CSS define propiedades abreviadas o shorthand properties al grupo la definición de propiedades comunes que actúan sobre el mismo tema.

Asi que vamos a ver como simplificar nuestro CSS con algunas de las principales propiedades.

Propiedad Background

La Propiedades background de CSS se utiliza para definir los efectos de fondo de un elemento.

Uso básico:

Para acortar el código, también es posible especificar todas las propiedades en una sola propiedad. Esto se llama una propiedad abreviada o shorthand. La propiedad abreviada para el fondo es simplemente “background” y lo hacemos de la siguiente manera:

background-shorthand-css

A esto podemos agregar background-attachment: scroll;  y, en CSS3, algunas propiedades adicionales.

Propiedad Font

La Propiedades font de CSS se utiliza para definir los efectos de texto del documento.

Uso básico

Se puede acortar de la siguiente forma:

font-shorthand-css

Propiedad Border

Las propiedades de borde CSS permiten especificar el estilo y el color del borde de un elemento.

Uso básico

Se puede acortar de la siguiente forma:

Propiedad Border-radius

Esta propiedad permiten especificar la redondez de los bordes de un elemento.

Uso básico

Se puede acortar de la siguiente forma:

Esta propiedad puede tener de uno a cuatro valores.

propiedad-border-radius-shorthand

Propiedad Margin

Las propiedades de margin CSS permiten especificar los márgenes de un elemento.

Uso básico

Se puede acortar de la siguiente forma:

Esta propiedad puede tener de uno a cuatro valores.

propiedad-margin-shorthand.png

Propiedad Padding

Con esta propiedad definimos un margen interior de un elemento. (Shorthand igual que el de margin).

Propiedad List-style

Especifique todas las propiedades de la lista en una declaración:

Uso básico

Se puede acortar de la siguiente forma:

Si especificamos el tipo no hay necesidad de especificar una imagen.

Propiedad Transition

Se puede acortar de la siguiente forma:

Propiedad Outline

Outline es una línea que se dibuja alrededor de los elementos (fuera de las fronteras) para hacer que el elemento.

Uso básico

Se puede acortar de la siguiente forma:

Otras propiedades que podemos utilizar con shorthand:

Propiedad column-rule

Propiedad Animations

Conclusión: al utilizar estas formas abreviadas para escribir CSS ahorraremos tiempo, tendremos poco código CSS  y  por lo tanto una hoja mas limpia y estaremos en lo mismo que hacen los grandes del diseño web.

Espero que este tips te sirva y gracias por ver este articulo. Nos vemos.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo