Blog

Cómo aprender CSS

No es necesario que te comprometas a memorizar cada propiedad y valor de CSS, ya que hay buenos lugares para buscarlos. Sin embargo, hay algunas cosas fundamentales que harán que CSS sea mucho más fácil de usar. Este artículo pretende guiarte en tu camino de aprendizaje de CSS.

Me llega mucha gente pidiéndome que les recomiende tutoriales sobre diversas partes de CSS, o preguntando cómo aprender CSS. También veo a mucha gente que está confundida sobre partes de CSS, en parte debido a ideas anticuadas sobre el lenguaje. Dado que el CSS ha cambiado sustancialmente en los últimos años, es un buen momento para refrescar los conocimientos. Incluso si el CSS es una pequeña parte de lo que haces (porque trabajas en otra parte de la pila), el CSS es la forma en que las cosas terminan viéndose como quieres en la pantalla, así que vale la pena estar razonablemente al día.

Por lo tanto, este artículo tiene como objetivo esbozar los fundamentos clave de CSS y los recursos para la lectura adicional en las áreas clave del desarrollo moderno de CSS. Muchos de ellos son cosas de aquí mismo en Smashing Magazine, pero también he seleccionado algunos otros recursos y también personas a las que 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 ayudarán a desbloquear el resto del lenguaje para ti.

Fundamentos del lenguaje

Para gran parte de CSS, no necesitas preocuparte por aprender las propiedades y valores de memoria. Puedes buscarlos cuando los necesites. Sin embargo, hay algunos fundamentos clave del lenguaje, sin los cuales te costará darle sentido. Merece la pena dedicar algo de tiempo a asegurarse de que entiendes estas cosas, ya que te ahorrará mucho tiempo y frustración a largo plazo.

Selectores, más que una clase

Un selector hace lo que dice en la lata, es decir selecciona alguna parte de tu documento para que puedas aplicarle reglas CSS. Mientras que la mayoría de la gente está familiarizada con el uso de una clase, o el estilo de un elemento HTML como body directamente, hay un gran número de selectores más avanzados que pueden seleccionar elementos basándose en su ubicación en el documento, quizás porque vienen directamente después de un elemento, o son las filas impares de una tabla.

Los selectores que forman parte de la especificación de nivel 3 (es posible que haya oído hablar de ellos como selectores de nivel 3) tienen una excelente compatibilidad con los navegadores. Para ver en detalle los distintos selectores que puede utilizar, vea la Referencia MDN.

Algunos selectores actúan como si se hubiera aplicado una clase a algo en el documento. Por ejemplo p:first-child se comporta como si hubieras añadido una clase a la primera p elemento, estos se conocen como pseudoclase selectores. El pseudo-elemento Los selectores actúan como si un elemento fuera insertado dinámicamente, por ejemplo ::first-line actúa de forma similar a cuando se envuelve un span alrededor de la primera línea de texto. Sin embargo, se volverá a aplicar si la longitud de esa línea cambia, lo que no ocurriría si se insertara el elemento. Puede ser bastante complejo con estos selectores. En el siguiente CodePen hay un ejemplo de un pseudo-elemento encadenado con una pseudo-clase. Apuntamos al primer p con un :first-child psuedo-clase, entonces el ::first-line selecciona la primera línea de ese elemento, actuando como si se añadiera un span alrededor de esa primera línea para ponerla en negrita y cambiar el color.

Ver la Pluma primera línea de Rachel Andrew (@rachelandrew) en CodePen.

Ver la pluma primera línea de Rachel Andrew (@rachelandrew) en CodePen.

La herencia y la cascada

La cascada define qué regla gana cuando varias reglas pueden aplicarse a un elemento. Si alguna vez te has encontrado en una situación en la que no puedes entender por qué algún CSS no parece aplicarse, es probable que la cascada te esté haciendo tropezar. La cascada está estrechamente vinculada a la herencia, que define qué propiedades heredan los elementos hijos del elemento al que se aplican. También está vinculada a la especificidad; diferentes selectores tienen diferente especificidad que controla cuál gana cuando hay varios selectores que podrían aplicarse a un elemento.

Nota: Para entender todo esto, le sugiero que lea La cascada y la herencia, en el MDN Introducción a CSS.

Si usted está luchando con conseguir un poco de CSS para aplicar a un elemento a continuación, su navegador DevTools son el mejor lugar para comenzar, echa un vistazo a el ejemplo siguiente en el que tengo un h1 dirigido por el selector de elemento h1 y haciendo que el encabezado sea de color naranja. También estoy utilizando una clase, que establece el h1 a rebeccapurple. La clase es más específica y por eso el h1 es púrpura. En DevTools, puedes ver que el selector de elemento está tachado porque no se aplica. Una vez que puedas ver que el navegador está recibiendo tu CSS (pero algo más lo ha anulado), entonces puedes empezar a averiguar por qué.

Ver la Pluma especificidad de Rachel Andrew (@rachelandrew) en CodePen.

Ver la Pluma especificidad de Rachel Andrew (@rachelandrew) en CodePen.
Las DevTools en Firefox muestran las reglas del selector h1 tachadas
DevTools puede ayudarte a ver por qué algún CSS no se aplica a un elemento (Vista previa grande)

El modelo de caja

CSS es todo sobre cajas. Todo lo que se muestra en la pantalla tiene una caja, y el modelo de caja describe cómo se calcula el tamaño de esa caja, teniendo en cuenta los márgenes, el relleno y los bordes. El Modelo de Caja estándar de CSS toma el ancho que le has dado a un elemento, y luego le añade a ese ancho el relleno y el borde – lo que significa que el espacio que ocupa el elemento es mayor que el ancho que le diste.

Más recientemente, hemos podido optar por utilizar un modelo de caja alternativo que utiliza el ancho dado al elemento como el ancho del elemento visible en 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 de abajo, tengo dos cajas. Ambas tienen un ancho de 200 píxeles, con un borde de 5 píxeles y un relleno de 20 píxeles. La primera caja utiliza el modelo de caja estándar, por lo que ocupa un ancho total de 250 píxeles. La segunda utiliza el modelo de caja alternativo, por lo que en realidad tiene 200 píxeles de ancho.

Ver la pluma modelos de caja de Rachel Andrew (@rachelandrew) en CodePen.

Ver la Pluma modelos de caja de Rachel Andrew (@rachelandrew) en CodePen.

Browser DevTools puede, una vez más, ayudarle a entender el modelo de caja en uso. En la siguiente imagen, utilizo Firefox DevTools para inspeccionar una caja utilizando el modelo por defecto content-box modelo de caja. Las herramientas me dicen que este es el modelo de caja en uso, y puedo ver el tamaño y cómo el borde y el relleno se añaden al ancho que asigné.

El panel del modelo de caja en Firefox DevTools
DevTools le ayuda a ver por qué una caja tiene un determinado tamaño, y el modelo de caja en uso (Vista previa grande)

Nota: Antes de IE6, Internet Explorer utilizaba el modelo de caja alternativo, con relleno y bordes que insertaban el contenido fuera de la anchura dada. Así que durante un tiempo los navegadores utilizaron diferentes modelos de caja. Cuando te sientas frustrado por los problemas de interoperabilidad actuales, alégrate de que las cosas hayan mejorado y no tengamos que lidiar con navegadores que calculan el ancho de las cosas de forma diferente.

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

Flujo normal

Si tienes un documento con algo de HTML marcando el contenido y lo ves en un navegador, es de esperar que sea legible. Los títulos y los párrafos comenzarán en una nueva línea, las palabras se muestran como una frase con un solo espacio en blanco entre ellas. Las etiquetas de formato, como em, no rompen el flujo de la frase. Este contenido se muestra en Flujo normal, o disposición de flujo en bloque. Cada parte del contenido se describe como “en flujo”; conoce el resto del contenido y por eso no se solapa.

Si trabajas con este comportamiento, en lugar de hacerlo en contra, tu vida es mucho más fácil. Es una de las razones por las que empezar con un documento HTML correctamente marcado tiene mucho sentido, ya que debido al flujo normal y a las hojas de estilo incorporadas que tienen los navegadores y que lo respetan, tu contenido parte de un lugar legible.

Contextos de formato

Una vez que tenga un documento con contenido en flujo normal, es posible que quiera cambiar el aspecto de parte de ese contenido. Esto se hace cambiando el contexto de formato del elemento. Como un ejemplo muy simple, si quieres que todos tus párrafos estén juntos y no comiencen en una nueva línea, podrías cambiar el p a display: inline cambiándolo de un bloque a un contexto de formato en línea.

Los contextos de formato definen esencialmente un tipo externo y uno interno. El externo controla cómo se comporta el elemento junto a otros elementos en la página, el interno controla cómo deben verse los hijos. Así, por ejemplo, cuando se dice display: flex estás estableciendo que el exterior sea un contexto de formato de bloque, y que los hijos tengan un contexto de formato flexible.

Nota : La última versión de la especificación de la pantalla cambia los valores de display para declarar explícitamente el valor interior y exterior. Por lo tanto, en el futuro se podrá decir display: block flex; (block siendo el exterior y flex el interior).

Leer más sobre 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 sacas un elemento del flujo, haciéndolo flotar o posicionándolo, entonces el espacio para ese elemento ya no será respetado por otros elementos en flujo.

Esto es más notorio con los elementos absolutamente posicionados. Si le das a un elemento position: absolute fuera de flujo, entonces tendrá que asegurarse de no tener una situación en la que el elemento fuera de flujo se superponga y haga ilegible alguna otra parte de su diseño.

Ver la Pluma Fuera de flujo: posicionamiento absoluto de Rachel Andrew (@rachelandrew) en CodePen.

Ver la Pluma Fuera de flujo: posicionamiento absoluto de Rachel Andrew (@rachelandrew) en CodePen.

Sin embargo, los elementos flotados también se eliminan del flujo, y mientras que el contenido siguiente se envolverá alrededor de las cajas de líneas acortadas de un elemento flotado, se puede ver colocando un color de fondo en la caja de los elementos siguientes que se han levantado y están ignorando el espacio utilizado por el elemento flotado.

Ver la Pluma Fuera de flujo: flotador de Rachel Andrew (@rachelandrew) en CodePen.

Ver la Pluma Fuera de flujo: flotador de Rachel Andrew (@rachelandrew) en CodePen.

Puede leer más sobre elementos en flujo y fuera de flujo en MDN. Lo importante es recordar que si sacas un elemento del flujo, tienes que gestionar tú mismo el solapamiento, ya que ya no se aplican las reglas habituales de la disposición del flujo de bloques.

Maquetación

Durante más de quince años hemos estado maquetando en CSS sin un sistema de maquetación diseñado para el trabajo. Esto ha cambiado. Ahora tenemos un sistema de maquetación perfectamente capaz que incluye Grid y Flexbox, pero también la Maquetación de Columnas Múltiples y los antiguos métodos de maquetación utilizados para su verdadero propósito. Si el CSS Layout es un misterio para ti, dirígete al MDN Aprender Layout o lee mi artículo Getting Started With CSS Layout aquí en Smashing Magazine.

No te imagines que métodos como grid y flexbox compiten de alguna manera. Para utilizar bien el Layout, a veces encontrará que un componente es mejor como componente flex y a veces como Grid. En ocasiones, querrá el comportamiento de flujo de columnas de multicol. Todas estas opciones son válidas. Si sientes que estás luchando contra la forma en que algo se comporta, eso es, en general, 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 hackear el 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 experiencia y he escrito una serie de artículos aquí en Smashing Magazine y en otros lugares para tratar de ayudar a domar el nuevo paisaje de diseño. Además del artículo sobre Layout mencionado anteriormente, tengo una serie completa sobre Flexbox – empieza con What Happens When You Create a Flexbox Flex Container. En Grid Por EjemploTengo un montón de pequeños ejemplos de CSS Grid – además de un video tutorial.

Además – y especialmente para los diseñadores – echa un vistazo a Jen Simmons y su Serie de vídeos de Layout Land.

Alineación

He separado Alignment de Layout en general porque aunque la mayoría de nosotros fuimos introducidos a Alignment como parte de Flexbox, estas propiedades se aplican a todos los métodos de layout, y vale la pena entenderlas en ese contexto en lugar de pensar en “Flexbox Alignment” o “CSS Grid alignment”. Tenemos un conjunto de propiedades de Alineación que funcionan de manera común cuando es posible; luego tienen algunas diferencias debido a la forma en que se comportan los diferentes métodos de diseño.

En MDN, puedes indagar en Alineación de cajas 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 necesitas 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 así es como hemos podido realizar maquetaciones de tipo Grid utilizando flotadores. Sin embargo, los métodos modernos de maquetación pueden hacer gran parte de la distribución del espacio por nosotros – si se lo permitimos. Entender cómo Flexbox asigna el espacio (o la Grid fr funciona), vale la pena su tiempo.

Aquí en Smashing Magazine, he escrito sobre Sizing in Layout en general y también para Flexbox en How Big Is That Flexible Box?

Diseño responsivo

Nuestros nuevos métodos de diseño de Grid y Flexbox a menudo significan que podemos utilizar menos consultas de medios que las que necesitábamos con nuestros antiguos métodos, debido al hecho de que son flexibles y responden a los cambios en la ventana gráfica o en el tamaño de los componentes sin que tengamos que cambiar el ancho de los elementos. Sin embargo, habrá lugares en los que querrás añadir algunos puntos de ruptura para mejorar aún más tus diseños.

Aquí hay algunas guías sencillas para Diseño responsivo, y para las consultas de medios, en general, echa un vistazo a mi artículo Using Media Queries for Responsive Design in 2018. En él, analizo para qué sirven las consultas de medios, y también muestro las nuevas características que llegarán a las consultas de medios en el nivel 4 de la especificación.

Fuentes y tipografía

Junto con el diseño, el uso de las fuentes en la web ha experimentado un gran cambio en el último año. Las fuentes variables, que permiten que un único archivo de fuentes tenga variaciones ilimitadas, ya están aquí. Para obtener una visión general de lo que son y cómo funcionan, vea esta excelente charla corta de Mandy Michael: Las fuentes variables y el futuro del diseño web. Además, recomiendo Tipografía dinámica con CSS moderno y fuentes variables por Jason Pamental.

Para explorar las fuentes variables y sus capacidades, existe una divertida demostración de Microsoft además de una serie de zonas de juego para probar las fuentes variables – Axis Praxis siendo el más conocido (también me gusta el Font Playground).

Una vez que empiece a trabajar con fuentes variables, entonces esta guía en MDN le resultará increíblemente útil. Para aprender a implementar una solución de reserva para los navegadores que no soportan las fuentes variables, lea Implementación de una fuente variable con fuentes web de reserva por Oliver Schöndorfer. La página web 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 miro en base a la necesidad de saber. No necesito usarlos a menudo, y la sintaxis parece saltar de mi cabeza entre los usos. Afortunadamente, la referencia en MDN me ayuda y sugeriría empezar con las guías en Uso de las transformaciones CSS y Uso de animaciones CSS. Zell Liew también tiene un buen artículo que proporciona una gran explicación de las transiciones CSS.

Para descubrir algunas de las cosas que son posibles, eche un vistazo a la Animista sitio.

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 haya que utilizar 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 grabado en An Event Apart, Val Head explica las opciones.

Utiliza las hojas de cálculo como un recordatorio, no como una herramienta de aprendizaje

Cuando menciono recursos de Grid o Flexbox, a menudo veo respuestas diciendo que no pueden hacer Flexbox sin una cierta hoja de trucos. No tengo ningún problema con las hojas de trucos como ayuda de memoria para buscar la sintaxis, y he publicado algunas propias. El problema de depender completamente de ellas es que puedes perderte por qué las cosas funcionan mientras copias la sintaxis. Entonces, cuando te encuentras con un caso en el que esa propiedad parece comportarse de forma diferente, esa aparente inconsistencia parece desconcertante, o un fallo del lenguaje.

Si te encuentras en una situación en la que el CSS parece estar haciendo algo muy extraño, pregunta por qué. Crea un caso de prueba reducido que destaque el problema, pregunta a alguien que esté más familiarizado con la especificación. Muchos de los problemas de CSS que me preguntan se deben a que esa persona cree que una propiedad funciona de forma diferente a como lo hace en la realidad. Es la razón por la que hablo mucho de cosas como la alineación y el tamaño, ya que estos son lugares donde esta confusión a menudo vive.

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

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba
Cerrar
Cerrar