Lo Que No Sabias Sobre CSS

1. ¿Qué es CSS?

CSS es un lenguaje informático. No es un lenguaje de programación, sino un lenguaje de estilos. O para explicarlo mejor: un lenguaje para diseñar. Comenzar a aprenderlo es fácil, pero como toda tecnología las partes avanzadas pueden ser muy duras de dominar.

La gente que apenas conoce CSS cree que es así:

body {
  background  : red;
  color       : white;
  margin      : 10px;
  font-family : Arial;
  font-size   : 18px;
}

A eso le llamo, nivel baby. Porque CSS en producción se parece más a esto:

.banner {
  --image        : url(/img/banner-bg.jpg);
  --color        : hsla(200,90%,60%,.9);
  --radius       : 1200px;
  --size         : 100%;
  --padding      : 2em;
  padding        : var(--padding) 0;
  background     : radial-gradient(circle var(--radius) at var(--size) var(--size), transparent calc(var(--size) * 0.5), var(--color) calc(var(--size) * 0.5)), var(--image) no-repeat center right / auto var(--size);
}

2. Condicionales

CSS tiene condicionales, aunque la sintaxis no se parece a un if(condicion). Las condicionales más conocidas de CSS son las Media Queries. Estas definen una condicion para la pantalla (tamaño, resolución, proporción, etc) y aplica los estilos contenidos en ella solo si esta condición se cumple.

@media screen and (min-width: 64em) {
  body {
    background: red;
  }
}

3. Variables

CSS tiene variables (también conocidas como custom properties) y pueden usarse igual que en un lenguaje de programación: para almacenar valores y luego invocarlos. También podemos redefinir las variables, hacer cálculos, etc.

:root {
  --color: red;
}

body {
  color: var(--color);
}

CSS

4. Ciclos

Aunque no pose estruturas como for o while CSS sí permite recorrer listas de elementos. En realidad un simple selector ya es un ciclo pues selecciona a todos los elementos del DOM que tengan dicho selector. Sin embargo, podemos ir más allá y usar pseudoclases como :nth-child() o :nth-of-type() para recorrer listas de elementos con criterios más personalizados.

.item:nth-child(2n + 1) {
  background: yellow;
}

5. Recortes

Ya no necesitamos Photoshop para recortar una imagen. Con la propiedad clip-path podemos dibujar figuras que recortarán la imagen. Lo mejor es que podemos animar esta propiedad y crear efectos muy vistosos.

.img {
  clip-path: circle(100px at center)
}

6. Dibujos

Si bien los dibujos con CSS no son utilizables en producción (en proyectos reales) es una costumbre de la comunidad retar nuestras capacidades y hacer dibujos lo más detallados posibles.

7. 3D

CSS es un lenguaje para diseñar. Pero no estamos limitados a diseñar en 2D sino que podemos diseñar también en 3D utilizando los tres ejes x, y y z.

8. Contadores

Con CSS podemos crear contadores que crecen o decrecen ya sea en elementos del DOM (para enumerar una lista por ejemplo) o por animaciones.

9. Modos de fusión

Los modos de fusión calculan una imagen resultante a partir de dos imagenes previas. Hasta ahora si querias utilizarlos necesitabas un programa como Photoshop. Pero ya podemos hacerlo con CSS y crear incluso filtros como los de Instagram.

10. Formas

Puedes crear formas alrededor de elementos flotados para que el texto alrededor se acomode a esa forma. Algo que solo podiamos hacer con programas como InDesign.

11. CSS Grid en lugar de position

CSS Grid nos permite dividir un área en filas y columnas y colocar los elementos en cualquier lugar dentro de la rejilla creada. Así que layouts que solo eran posibles con position ahora podemos crearlos con CSS Grid

Conclusión

CSS es un lenguaje muy amplio y con una complejidad creciente a medida que empiezas a profundizar en él. Y lo más importante, gracias a CSS la web es hermosa. ¿Te imaginas un mundo sin CSS? ¿Páginas y aplicaciones web monócromas, aburridas, feas? Nadie merece un mundo feo, sin alegria. Nadie merece un mundo sin CSS.

Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.