Los shorthands en CSS son una herramienta poderosa para escribir código más limpio y eficiente. Permiten combinar múltiples propiedades en una sola línea, lo que ahorra tiempo y reduce la cantidad de código que debemos escribir. En este artículo, exploraremos cómo utilizar los shorthands en CSS para propiedades comunes como border, margin, font, etc. Aprenderás a simplificar tu código y mejorar la legibilidad, al tiempo que mantendrás un control total sobre el estilo de tus elementos.
Outline y Border
Para border y outline, se puede reducir la cantidad de código al combinar las propiedades de ancho, estilo y color en una sola línea.
/* Más código */
outline-width: 2px;
outline-style: solid;
outline-color: #fff;
/* Menos código */
outline: 2px solid #fff;/* Más código */
border-width: 1rem;
border-style: dashed;
border-color: blue;
/* Menos código */
border: 1rem dashed blue;Background
Utilizando la propiedad background se puede combinar el color de fondo, la imagen de fondo, la repetición y la posición en una sola línea, lo que simplifica significativamente el código
/* Más código */
background-color: #ccc;
background-image: url('imagen.png');
background-repeat: no-repeat;
background-position: center;
/* Menos código */
background: #ccc url('imagen.png') no-repeat center;Font
Se utiliza esta propiedad para consolidar el estilo, peso, tamaño, altura de línea y familia de fuentes en una única declaración.
/* Más código */
font-style: italic;
font-weight: 600;
font-size: 16px;
line-height: 1.5;
font-family: 'Arial', sans-serif;
/* Menos código */
font: italic 600 16px/1.5 'Arial', sans-serif;List Style
Se unifica el tipo de marcador, su posición y una posible imagen asociada en una única línea de código
/* Más código */
list-style-type: square;
list-style-position: inside;
list-style-image: url('imagen.png');
/* Menos código */
list-style: square inside url('imagen.png');Padding, Margin, Border Style, Border Color y Border Width
Los shorthands (abreviaciones) para ‘padding’ y ‘margin’, así como las propiedades ‘width’, ‘style’ y ‘color’ para ‘border’, aplican el mismo principio de simplificación en relación a los valores de las direcciones top, right, bottom y left. A continuación, ilustraremos diversos escenarios para que lo comprendas mejor:
1 valor
/* Más código */
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
/* Menos código */
border-style: dotted;2 valores
/* Más código */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
/* Menos código */
padding: 10px 20px;
/* top bottom - right left */3 valores
/* Más código */
margin-top: 12px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
/* Menos código */
margin: 12px 20px 10px;
/* top - right&left - bottom */4 valores
/* Más código */
border-top-width: 3px;
border-right-width: 4px;
border-bottom-width: 1px;
border-left-width: 5px;
/* Menos código */
border-width: 3px 4px 1px 5px;
/* top - right - bottom - left */En caso de que los valores para ‘top’ y ‘bottom’ sean idénticos, pero los valores para ‘right’ y ‘left’ sean diferentes, se requerirá especificar los cuatro valores correspondientes.
/*BORDER COLOR*/
/* Más código */
border-top-color: yellow;
border-right-color: pink;
border-bottom-color: yellow;
border-left-color: #000;
/* Menos código */
border-color: yellow pink yellow #000;
/* top - right - bottom - left */Border Radius
La propiedad ‘border-radius’ en CSS también se aprovecha de la simplificación mediante shorthands, al especificar los valores ‘top-left’, ‘top-right’, ‘bottom-right’ y ‘bottom-left’ en el orden apropiado. Exploraremos cuatro ejemplos:
1 valor
/* Más código */
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
/* Menos código */
border-radius: 1rem;2 valores
/* Más código */
border-top-left-radius: 16px;
border-top-right-radius: 20px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 20px;
/* Menos código */
border-radius: 16px 20px;
/* tl & br - tr & bl*/
## 3 valores
```css
/* Más código */
border-top-left-radius: 16px;
border-top-right-radius: 20px;
border-bottom-right-radius: 18px;
border-bottom-left-radius: 20px;
/* Menos código */
border-radius: 16px 20px 18px;
/* tl - tr & bl - br*/4 valores
/* Más código */
border-top-left-radius: 16px;
border-top-right-radius: 20px;
border-bottom-right-radius: 18px;
border-bottom-left-radius: 22px;
/* Menos código */
border-radius: 16px 20px 18px 22px;Al comprender cómo aplicar shorthands de manera efectiva, podemos agilizar nuestro flujo de trabajo y mejorar la mantenibilidad de nuestros proyectos. Así que, no dudes en incorporar shorthands en tus proyectos de CSS para lograr un código más limpio y fácil de gestionar. ¡Aprovecha esta herramienta para potenciar tus habilidades de diseño web!