Cómo aprender CSS

Muchas personas me piden que les recomiende tutoriales sobre varias partes de CSS, o me preguntan cómo aprender CSS. También veo a muchas personas que están confundidas acerca de partes de CSS, en parte debido a ideas obsoletas sobre el lenguaje. Dado que CSS ha cambiado sustancialmente en los últimos años, este es un muy buen momento para actualizar sus conocimientos. Incluso si CSS es una pequeña parte de lo que haces (porque trabajas en otra parte de la pila), CSS es cómo las cosas terminan luciendo como las quieres en la pantalla, por lo que vale la pena estar razonablemente actualizado.

Por lo tanto, este artículo tiene como objetivo describir los fundamentos clave de CSS y los recursos para leer más sobre áreas clave del desarrollo moderno de CSS. Muchas de esas son cosas aquí en Smashing Magazine, pero también he seleccionado algunos otros recursos y también personas para seguir en áreas clave de CSS. No es una guía completa para principiantes ni pretende cubrir absolutamente todo. Mi objetivo es cubrir la amplitud del CSS moderno con un enfoque en algunas áreas clave, que lo ayudarán a desbloquear el resto del lenguaje para usted.

Fundamentos del lenguaje

Para gran parte de CSS, no necesita preocuparse por aprender propiedades y valores de memoria. Puedes buscarlos cuando los necesites. Sin embargo, hay algunos fundamentos clave del lenguaje, sin los cuales tendrá dificultades para encontrarle sentido. Realmente vale la pena dedicar algo de tiempo para asegurarse de que comprende estas cosas, ya que le ahorrará mucho tiempo y frustración a largo plazo.

Selectores, algo más que clase

Un selector hace lo que dice en la lata, selecciona alguna parte de su documento para que pueda aplicarle reglas CSS. Si bien la mayoría de las personas están familiarizadas con el uso de una clase o el estilo directo de un elemento HTML, como el body , hay una gran cantidad de selectores más avanzados que pueden seleccionar elementos en función de su ubicación en el documento, quizás porque vienen directamente después de un elemento, o son las filas impares en una tabla.

Los selectores que forman parte de la especificación de Nivel 3 (es posible que los haya oído llamar selectores de Nivel 3) tienen una excelente compatibilidad con los navegadores. Para ver en detalle los distintos selectores que puede usar, consulte la Referencia de MDN.

Algunos selectores actúan como si hubieras aplicado una clase a algo en el documento. Por ejemplo p:first-child se comporta como si agregara una clase al primer elemento p , estos se conocen como selectores de pseudoclase . Los selectores de pseudo-elementos actúan como si un elemento se insertara dinámicamente, por ejemplo ::first-line actúa de manera similar a cuando envuelves un span alrededor de la primera línea de texto. Sin embargo, se volverá a aplicar si cambia la longitud de esa línea, lo que no sería el caso si insertara el elemento. Puede volverse bastante complejo con estos selectores. A continuación, CodePen es un ejemplo de un pseudoelemento encadenado con una pseudoclase. Apuntamos al primer elemento p con una clase psuedo :first-child , luego el selector ::first-line selecciona la primera línea de ese elemento, actuando como si se hubiera agregado un lapso alrededor de esa primera línea para ponerla en negrita y cambiar el color

herencia y la cascada

La cascada define qué regla gana cuando se pueden aplicar varias reglas a un elemento. Si alguna vez ha estado en una situación en la que no puede entender por qué algunos CSS no parecen aplicarse, es probable que la cascada lo esté haciendo tropezar. La cascada está estrechamente relacionada con la herencia, que define qué propiedades heredan los elementos secundarios del elemento al que se aplican. También está vinculado a la especificidad; diferentes selectores tienen una especificidad diferente que controla cuál gana cuando hay varios selectores que podrían aplicarse a un elemento.

Nota : para comprender todas estas cosas, sugeriría leer The Cascade and Inheritance, en la Introducción a CSS de MDN.

Si tiene dificultades para aplicar CSS a un elemento, entonces las DevTools de su navegador son el mejor lugar para comenzar, eche un vistazo al siguiente ejemplo en el que tengo un elemento h1 dirigido por el selector de elementos h1 y haciendo que el encabezado sea naranja. También estoy usando una clase, que establece h1 en rebeccapurple. La clase es más específica, por lo que el h1 es morado. En DevTools, puede ver que el selector de elementos está tachado porque no se aplica. Una vez que pueda ver que el navegador está obteniendo su CSS (pero algo más lo anuló), entonces puede comenzar a averiguar por qué.

El modelo de caja

CSS se trata de cajas. Todo lo que se muestra en la pantalla tiene un cuadro, y el modelo de cuadro describe cómo se calcula el tamaño de ese cuadro, teniendo en cuenta los márgenes, el relleno y los bordes. El modelo de cuadro CSS estándar toma el ancho que le ha dado a un elemento, luego agrega a ese ancho el relleno y el borde, lo que significa que el espacio que ocupa el elemento es más grande que el ancho que le dio.

Más recientemente, pudimos elegir usar un modelo de caja alternativo que usa el ancho dado en el elemento como el ancho del elemento visible en la pantalla. Cualquier relleno o borde insertará el contenido de la caja desde los bordes. Esto tiene mucho más sentido para muchos diseños.

En la demostración a continuación, tengo dos cajas. Ambos tienen un ancho de 200 píxeles, con un borde de 5 píxeles y un relleno de 20 píxeles. El primer cuadro utiliza el modelo de cuadro estándar, por lo que ocupa un ancho total de 250 píxeles. El segundo usa el modelo de cuadro alternativo, por lo que en realidad tiene 200 píxeles de ancho.

Browser DevTools puede ayudarlo una vez más a comprender el modelo de caja en uso. En la imagen a continuación, uso Firefox DevTools para inspeccionar un cuadro usando el modelo content-box predeterminado. Las herramientas me dicen que este es el modelo de caja en uso, y puedo ver el tamaño y cómo se agrega el borde y el relleno al ancho que asigné.

Nota : antes de IE6, Internet Explorer usaba el modelo de caja alternativo, con relleno y bordes insertando contenido lejos del ancho dado. ¡Entonces, durante un tiempo, los navegadores usaron diferentes modelos de cajas! Cuando se sienta frustrado por los problemas de interoperabilidad actuales, alégrese de que las cosas hayan mejorado para que no tengamos que lidiar con navegadores que calculan el ancho de las cosas de manera diferente.

Hay una buena explicación del modelo de caja y el tamaño de la caja en los trucos de CSS, además de una explicación de la mejor manera de usar globalmente el modelo de caja alternativo en su sitio.

Flujo Normal

Si tiene un documento con algo de HTML que marca el contenido y lo ve en un navegador, es de esperar que sea legible. Los encabezados y párrafos comenzarán en una nueva línea, las palabras se mostrarán como una oración con un solo espacio en blanco entre ellas. Las etiquetas de formato, como em, no interrumpen el flujo de la oración. Este contenido se muestra en Flujo normal o Diseño de flujo en bloque. Cada parte del contenido se describe como "en flujo"; conoce el resto del contenido y, por lo tanto, no se superpone.

Si trabaja a favor y no en contra de este comportamiento, su vida se vuelve mucho más fácil. Es una de las razones por las que comenzar con un documento HTML marcado correctamente tiene mucho sentido, ya que debido al flujo normal y las hojas de estilo incorporadas que tienen los navegadores que lo respetan, su contenido comienza desde un lugar legible.

Contextos de formato

Una vez que tenga un documento con contenido en flujo normal, es posible que desee cambiar la apariencia de parte de ese contenido. Para ello, cambie el contexto de formato del elemento. Como un ejemplo muy simple, si quisiera que todos sus párrafos se ejecutaran juntos y no comenzaran en una nueva línea, podría cambiar el elemento p para display: inline cambiándolo de un bloque a un contexto de formato en línea.

Los contextos de formato definen esencialmente un tipo externo e interno. El exterior controla cómo se comporta el elemento junto con otros elementos en la página, el interior controla cómo deben verse los elementos secundarios. Entonces, por ejemplo, cuando dice display: flex , está configurando el exterior para que sea un contexto de formato de bloque y los elementos secundarios para que tengan un contexto de formato flexible.

Nota : La última versión de la Especificación de visualización cambia los valores de display para declarar explícitamente el valor interno y externo. Por lo tanto, en el futuro podría decir display: block flex; (el block es el exterior y la flex es el interior).

Lea más sobre la display en MDN.

Estar dentro o fuera del flujo

Los elementos en CSS se describen como 'en flujo' o 'fuera de flujo'. A los elementos en flujo se les da espacio y ese espacio es respetado por los otros elementos en flujo. Si saca un elemento del flujo, flotándolo o posicionándolo, entonces el espacio para ese elemento ya no será respetado por otros elementos en el flujo.

Esto es más notable con elementos absolutamente posicionados. Si proporciona una position: absolute , se elimina del flujo, entonces deberá asegurarse de no tener una situación en la que el elemento fuera del flujo se superponga y haga ilegible alguna otra parte de su diseño.

Sin embargo, los elementos flotantes también se eliminan del flujo y, si bien el siguiente contenido se envolverá alrededor de los cuadros de líneas acortadas de un elemento flotante, puede ver colocando un color de fondo en el cuadro de los siguientes elementos que se han levantado y están ignorando el espacio utilizado por el elemento flotante.

Puede leer más sobre elementos de flujo y fuera de flujo en MDN. Lo importante que debe recordar es que si saca un elemento del flujo, debe administrar la superposición usted mismo, ya que las reglas regulares del diseño del flujo de bloques ya no se aplican.

Disposición

Durante más de quince años hemos estado haciendo maquetación en CSS sin un sistema de maquetación diseñado para el trabajo. Esto ha cambiado. Ahora tenemos un sistema de diseño perfectamente capaz que incluye Grid y Flexbox, pero también el diseño de múltiples columnas y los métodos de diseño más antiguos utilizados para su propósito real. Si el diseño CSS es un misterio para ti, dirígete al tutorial MDN Learn Layout o lee mi artículo Primeros pasos con el diseño CSS aquí en Smashing Magazine.

No imagine que métodos como grid y flexbox están compitiendo de alguna manera . Para usar bien Layout, a veces encontrará que un componente es mejor como componente flexible y, a veces, como Grid. En ocasiones, querrá el comportamiento de flujo de columna de multicol. Todas estas son opciones válidas. Si siente que está luchando contra la forma en que algo se comporta, en general es una muy buena señal de que podría valer la pena dar un paso atrás y probar un enfoque diferente. Estamos tan acostumbrados a piratear CSS para que haga lo que queremos que es probable que olvidemos que tenemos otras opciones para probar.

El diseño es mi principal área de especialización y he escrito una serie de artículos aquí en Smashing Magazine y en otros lugares para tratar de ayudar a dominar el nuevo panorama de diseño. Además del artículo de diseño mencionado anteriormente, tengo una serie completa sobre Flexbox: comience con Qué sucede cuando crea un contenedor flexible de Flexbox. En Grid By Example, tengo un montón de pequeños ejemplos de CSS Grid, además de un video tutorial de captura de pantalla.

Además, y especialmente para los diseñadores, echa un vistazo a Jen Simmons y su serie de videos Layout Land.

Alineación

He separado la alineación del diseño en general porque, si bien la mayoría de nosotros conocimos la alineación como parte de Flexbox, estas propiedades se aplican a todos los métodos de diseño, y vale la pena entenderlas en ese contexto en lugar de pensar en "Flexbox Alignment" o "Alineación de cuadrícula CSS". Tenemos un conjunto de propiedades de Alineación que funcionan de manera común siempre que sea posible; luego tienen algunas diferencias debido a la forma en que se comportan los diferentes métodos de diseño.

En MDN, puede profundizar en Box Alignment y cómo se implementa para Grid, Flexbox, Multicol y Block Layout. Aquí en Smashing Magazine, tengo un artículo que cubre específicamente la alineación en Flexbox: Todo lo que necesita saber sobre la alineación en Flexbox.

Dimensionamiento

Pasé gran parte de 2018 hablando sobre la especificación de tamaño intrínseco y extrínseco, y cómo se relaciona con Grid y Flexbox en particular. En la web, estamos acostumbrados a establecer el tamaño en longitudes o porcentajes, ya que es así como hemos podido hacer diseños de tipo Grid utilizando flotantes. Sin embargo, los métodos de diseño modernos pueden hacer gran parte de la distribución del espacio por nosotros, si se lo permitimos. Comprender cómo Flexbox asigna el espacio (o cómo funciona la unidad Grid fr ), vale la pena.

Aquí en Smashing Magazine, he escrito sobre el tamaño en el diseño en general y también para Flexbox en ¿Qué tan grande es esa caja flexible?

Diseño de respuesta

Nuestros nuevos métodos de diseño de Grid y Flexbox a menudo significan que podemos salirnos con la nuestra con menos consultas de medios de las que necesitábamos con nuestros métodos anteriores, debido al hecho de que son flexibles y responden a cambios en la ventana gráfica o el tamaño del componente sin que necesitemos cambiar el anchos de elementos. Sin embargo, habrá lugares en los que querrá agregar algunos puntos de interrupción para mejorar aún más sus diseños.

Aquí hay algunas guías simples para el diseño receptivo y, para las consultas de medios, en general, consulte mi artículo Uso de consultas de medios para el diseño receptivo en 2018. Echo un vistazo a para qué son útiles las consultas de medios y también muestro las nuevas funciones que llegarán. Consultas de medios en el nivel 4 de la especificación.

Fuentes y tipografía

Junto con Layout, el uso de fuentes en la web ha experimentado un gran cambio en el último año. Las fuentes variables, que permiten que un solo archivo de fuente tenga variaciones ilimitadas, están aquí. Para obtener una descripción general de lo que son y cómo funcionan, vea esta excelente charla breve de Mandy Michael: Fuentes variables y el futuro del diseño web. Además, recomendaría la tipografía dinámica con CSS moderno y fuentes variables de Jason Pamental.

Para explorar las fuentes variables y sus capacidades, hay una demostración divertida de Microsoft, además de una serie de áreas de juego para probar las fuentes variables: Axis Praxis es la más conocida (también me gusta Font Playground).

Una vez que comience a trabajar con fuentes variables, esta guía en MDN le resultará increíblemente útil. Para obtener información sobre cómo implementar una solución alternativa para navegadores que no admiten fuentes variables, lea Implementing a Variable Font With Fallback Web Fonts de Oliver Schondorfer. El editor de fuentes de Firefox DevTools también tiene soporte para trabajar con fuentes variables.

Transformaciones y animación

Las transformaciones y animaciones CSS son definitivamente algo que busco cuando necesito saberlo. No necesito usarlos a menudo, y la sintaxis parece salirse de mi cabeza entre usos. Afortunadamente, la referencia en MDN me ayuda y sugeriría comenzar con las guías sobre el uso de transformaciones CSS y el uso de animaciones CSS. Zell Liew también tiene un buen artículo que brinda una excelente explicación de las transiciones CSS.

Para descubrir algunas de las cosas que son posibles, echa un vistazo al sitio de Animista.

Una de las cosas que pueden ser confusas acerca de las animaciones es qué enfoque tomar. Además de lo que se admite en CSS, es posible que deba involucrar JavaScript, SVG o la API de animación web, y todas estas cosas tienden a agruparse. En su charla, Elige tu aventura de animación grabada en An Event Apart, Val Head explica las opciones.

Use Cheatsheets como un recordatorio, no como una herramienta de aprendizaje

Cuando menciono los recursos de Grid o Flexbox, a menudo veo respuestas que dicen que no pueden hacer Flexbox sin una determinada hoja de trucos. No tengo ningún problema con las hojas de trucos como ayuda de memoria para buscar sintaxis, y he publicado algunas propias. El problema de confiar completamente en ellos es que puede perderse por qué las cosas funcionan a medida que copia la sintaxis. Luego, cuando llega a un caso en el que esa propiedad parece comportarse de manera diferente, esa aparente inconsistencia parece desconcertante o una falla del lenguaje.

Si se encuentra en una situación en la que CSS parece estar haciendo algo muy extraño, pregunte por qué . Cree un caso de prueba reducido que resalte el problema, pregúntele a alguien que esté más familiarizado con la especificación. Muchos de los problemas de CSS sobre los que me preguntan se deben a que esa persona cree que una propiedad funciona de manera diferente a como funciona en la realidad. Es por eso que hablo mucho sobre cosas como la alineación y el tamaño, ya que estos son lugares donde a menudo vive esta confusión.

Sí, hay cosas extrañas en CSS. Es un lenguaje que ha evolucionado a lo largo de los años, y hay cosas que no podemos cambiar, hasta que inventemos una máquina del tiempo. Sin embargo, una vez que tenga algunos conceptos básicos y comprenda por qué las cosas se comportan como lo hacen, le resultará mucho más fácil con los lugares más complicados.