Lo que no sabes de CSS

Aunque me gusta y disfruto programar, CSS sigue siendo mi lenguaje favorito. Seguramente porque mi perfil es más ligado al diseño que me gusta trabajar con formas y colores antes que con números y operaciones. Sin embargo me entristece encontrar a gente que menosprecia este lenguaje. Y lo peor ¡sin conocerlo! Así que preparé una charla titulada Lo que no sabes de CSS para el EDcamp Cochabamba 2018 y este artículo es una adaptación en la que incluyo los links a los ejemplos y a los slides.

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í:

1body {
2  background  : red;
3  color       : white;
4  margin      : 10px;
5  font-family : Arial;
6  font-size   : 18px;
7}
8

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

1.banner {
2  --image        : url(/img/banner-bg.jpg);
3  --color        : hsla(200,90%,60%,.9);
4  --radius       : 1200px;
5  --size         : 100%;
6  --padding      : 2em;
7  padding        : var(--padding) 0;
8  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);
9}
10

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.

1@media screen and (min-width: 64em) {
2  body {
3    background: red;
4  }
5}
6

Ejemplo:

See the Pen Media Queries CSS by Alvaro Felipe (@AlvaroFelipe) on CodePen.

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.

1:root {
2  --color: red;
3}
4
5body {
6  color: var(--color);
7}
8

Ejemplo:

See the Pen Variables CSS by Alvaro Felipe (@AlvaroFelipe) on CodePen.

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.

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

Ejemplo:

See the Pen Loops CSS by Alvaro Felipe (@AlvaroFelipe) on CodePen.

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.

1.img {
2  clip-path: circle(100px at center)
3}
4

Ejemplo:

Ejemplo:

See the Pen Clip Path by Alvaro Felipe (@AlvaroFelipe) on CodePen.

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.

Ejemplos:

Francine

See the Pen SNES Joypad by Alvaro Felipe (@AlvaroFelipe) on CodePen.

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.

Ejemplo:

See the Pen 3D Cube by Alvaro Felipe (@AlvaroFelipe) on CodePen.

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.

Ejemplo:

See the Pen CSS Only Counter by Alvaro Felipe (@AlvaroFelipe) on CodePen.

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.

Ejemplo

See the Pen CSS blend modes by Alvaro Felipe (@AlvaroFelipe) on CodePen.

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.

Ejemplo:

See the Pen CSS Shapes by Alvaro Felipe (@AlvaroFelipe) on CodePen.

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.

Ejemplo:

See the Pen CSS Grid Position by Alvaro Felipe (@AlvaroFelipe) on CodePen.

Curso CSS desde Cero

CSS es mucho más complejo de lo que parece y te preguntaras ¿por donde empiezo? Este curso es perfecto para introducirte en el mundo de CSS, vas a aprender desde cero y al terminar entenderás cómo funciona Responsive Web Design y podrás crear tus propios templates.

Mira el temario: ✅ ed.team/cursos/css

¿Por que es gratis?

Este curso era uno de los más vendidos de EDteam, entonces ¿Por qué lo hicimos gratuito? La educación gratuita cambia vidas. Hay miles de personas que no cuentan los recursos suficientes y esto no debería ser un impedimento para la educación.

Ya no hay pretextos, ¡es gratis! Aprende CSS ahora 👉 ed.team/cursos/css

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.

Video de la charla: