Acortar hoja de estilos CSS – Propiedades Shorthand

acortar css shorthand Muchas veces, nuestra hoja de estilos CSS, queda de un tamaño inmenso al terminar nuestro sitio. Pero CSS nos permite acortarla, haciendo uso de las propiedades Shorthand.

En este artículo te enseño como realizalo.

Dentro de CSS 2.1,  algunas propiedades permiten establecer simultáneamente varios valores diferentes. Se las denominan «propiedades shorthand» y todos los desarrolladores web profesionales deberían utilizarlas.

Estas propiedades shorthand poseen la gran ventaja de permitir crear hojas de estilos mucho más cortas y rápidas de leer.

Las seis propiedades shorthand disponibles en CSS 2.1. son:

font, maring, padding, border, background, list-style

Hagamos un ejemplo de aplicacion de propiedades shorthand.
Supongamos que tenemos el siguiente código CSS estándar:

[sourcecode language=’css’]
p {
font-style: normal;
font-weight: bold;
font-size: 2.5em;
font-family: Arial, sans-serif;
}
h2 {
background-color: #000000;
background-image: url(«imagenes/back-html.png»);
background-position: 20px 15px;
background-repeat: no-repeat;
}
div {
margin-top: 15px;
margin-right: 20px;
margin-bottom: 7px;
margin-left: 20px;
padding-top: 31px;
padding-right: 52px;
padding-bottom: 10px;
padding-left: 8px;
}
[/sourcecode]

Este mismo código, aplicando shorthand, nos quedaria asi:

[sourcecode language=’css’]
p {
font: normal bold 2.5em Arial, sans-serif;
}
h2 {
background: #000 url(«imagenes/back-html.png») no-repeat 20px 15px;
}
div {
margin: 15px 20px 7px 20px;
padding: 31px 52px 10px 8px;
}
[/sourcecode]

Como observamos, pasamos de un codigo CSS standard de 22 lineas, a otro con propiedades shorhand de 10 líneas. Es menos de la mitad del largo original.

Esto hará el código mas accesible, y rápido de cargar.

Espero lo apliquen y me comenten como les fue.
Saludos!
Cristian
curso html y css

Cursos de desarrollo web:

[featured_products per_page="12" columns="4"]

Diseñador y Programador Web Full-Stack especializado en PHP / MySQL / Laravel / Wordpress / HTML5 / CSS3 / JS.

3 thoughts on “Acortar hoja de estilos CSS – Propiedades Shorthand

  1. pablo Reply

    A verdad Cristian, que he dado una vuelta por tú página y la verdad que nunca visto que se diera información tan valiosa….

    muchas gracias.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.