Códigos de CSS que deberías usar ahora mismo

CSS es un lenguaje poderoso para estilizar páginas web, pero a menudo pasamos por alto algunas de sus características más útiles. En este artículo, te revelaré algunos códigos secretos y funcionales que te harán la vida más fácil como desarrollador.

1. all: unset

Esta propiedad te permite restablecer todas las propiedades CSS de un elemento a sus valores iniciales.

.elemento {
  all: unset;
  background-color: red;
}

2. currentColor

Esta palabra clave te permite utilizar el valor de la propiedad color de un elemento en otras propiedades CSS.

.elemento {
  color: blue;
  border: 1px solid currentColor;
}

3. var()

Esta función te permite definir y utilizar variables CSS.

:root {
  --color-principal: blue;
}

.elemento {
  color: var(--color-principal);
}

4. calc()

Esta función te permite realizar cálculos matemáticos en valores CSS.

.elemento {
  width: calc(100% - 20px);
}

5. clamp()

Esta función te permite definir un rango de valores para una propiedad CSS, con un valor mínimo, un valor preferido y un valor máximo.

.elemento {
  font-size: clamp(16px, 2vw, 24px);
}

6. object-fit

Esta propiedad te permite controlar cómo se ajusta una imagen o video dentro de su contenedor.

.imagen {
  object-fit: cover;
}

7. aspect-ratio

Esta propiedad te permite definir la relación de aspecto de un elemento.

.video {
  aspect-ratio: 16 / 9;
}

8. backdrop-filter

Esta propiedad te permite aplicar efectos visuales a la parte de un elemento que se encuentra detrás de otro elemento.

.modal {
  backdrop-filter: blur(10px);
}

9. scroll-behavior: smooth

Esta propiedad te permite crear desplazamientos suaves al hacer clic en enlaces ancla.

html {
  scroll-behavior: smooth;
}

10. writing-mode

Esta propiedad te permite cambiar la dirección de escritura del texto.

.texto-vertical {
  writing-mode: vertical-rl;
}

Aquí te dejo un video de los básicos de CSS

Conclusión

Estos son solo algunos de los códigos secretos y funcionales de CSS que puedes utilizar para mejorar tu productividad como desarrollador. ¡Explora la documentación de CSS para descubrir aún más! De igual manera si quieres aprender más de CSS visita este sitio. Y para más noticias de tecnoloía vista mi blog.