Te he ordenado el aprendizaje de CSS en 10 etapas, de fundamentos a arquitectura avanzada, cada una con los recursos gratuitos que uso yo misma para explicar o repasar el tema. No es una lista suelta: sigue el orden si vas empezando, o salta directo a la etapa que necesites si ya tienes base.
Fundamentos CSS 1.0: sintaxis y selectores básicos
Antes de tocar una sola propiedad, conviene entender qué hace el navegador con tu CSS y cómo se escribe una declaración correctamente. Esta etapa es la base de todo lo que viene después: si te la saltas, vas a arrastrar dudas de sintaxis durante meses sin saber de dónde vienen.
- Cómo funcionan los navegadores (MDN) — para entender qué pasa entre que escribes CSS y ves el resultado en pantalla.
- Formas de añadir CSS en una página web (W3Schools) — inline, interno y externo, con cuándo usar cada uno.
- Declaraciones de CSS (MDN, en español) — la sintaxis exacta de propiedad, valor y punto y coma.
- Selectores universales (MDN)
- Selectores de clase (MDN)
- Selectores de tipo, clase e ID (MDN Learn)
- Selectores de atributo (MDN)
- Selectores de ID (MDN)
- Vídeo: cómo funciona la herencia en CSS — si prefieres verlo explicado antes de leer la referencia.
- Herencia en CSS (MDN)
Si solo puedes quedarte con dos enlaces de esta etapa, que sean los selectores de tipo/clase/ID y la herencia — son los dos conceptos que más se malinterpretan cuando se empieza, y de los que más dependen las etapas siguientes.
Fundamentos CSS 2.0: caja y medidas
El modelo de caja (box model) es la pieza que más frustra a quien empieza: por qué un elemento «no cabe» donde debería, por qué un margen se junta con otro, por qué el padding cambia el tamaño visible. Se entiende de una vez si lo estudias como bloque, no elemento a elemento.
- The CSS Box Model (W3Schools) — empieza por aquí, es la explicación más visual.
- Sizing items in CSS (MDN Learn)
- CSS Borders (W3Schools)
- CSS Padding (W3Schools)
- CSS margin Property (W3Schools)
- CSS Units Explained (Digital Ocean) — px, %, em, rem, explicados con ejemplos de cuándo usar cada uno.
- CSS Units (Tutorial Republic) — complementa al anterior con más ejemplos prácticos.
- Cómo usar variables CSS (custom properties) — el artículo propio del blog, para cuando quieras dejar de repetir el mismo valor por todo el código.
Un consejo real: decide desde ya si vas a trabajar con box-sizing: border-box en todo el proyecto (te ahorra la mitad de los quebraderos de cabeza del box model) o no. Casi todo el mundo profesional lo usa por defecto; los tres primeros enlaces de esta lista te explican por qué.
Fundamentos CSS 3.0: maquetación en capas
Aquí pasas de estilar elementos sueltos a organizar la página entera. Flexbox y Grid son las dos herramientas que vas a usar el resto de tu carrera para esto — no hace falta dominar las dos a la vez, pero sí entender cuándo usar cada una.
- CSS Layout: la propiedad position (W3Schools) — static, relative, absolute, fixed y sticky, con ejemplos.
- CSS Flexbox: aprende paso a paso — tutorial propio del blog, para maquetación en una sola dirección (fila o columna).
- Aprende a utilizar CSS Grid — tutorial propio, para maquetación en dos dimensiones a la vez.
- Introduction to CSS layout (MDN Learn)
- Fundamental CSS comprehension (MDN Learn) — un repaso final antes de pasar a selectores avanzados.
Mi regla rápida: si maquetas algo que fluye en una sola dirección (un menú, una barra de botones), Flexbox. Si maquetas una estructura completa con filas y columnas a la vez (una galería, el layout general de una página), Grid.
Fundamentos CSS 4.0: selectores avanzados
Con la base ya sólida, toca afinar la puntería: seleccionar exactamente el elemento que quieres sin añadir clases de más. Esto es lo que separa un CSS que se mantiene bien de uno lleno de clases repetidas.
- Selector list (MDN) — cómo aplicar el mismo estilo a varios selectores a la vez.
- Combinators (MDN Learn) — descendiente, hijo directo, hermano adyacente y hermano general.
- Pseudo-classes and pseudo-elements (MDN Learn) —
:hover,:nth-child(),::beforey compañía.
Esta etapa es corta a propósito: son solo tres conceptos, pero practícalos hasta que los uses sin pensar. Vas a recurrir a los combinadores y las pseudoclases en prácticamente cada proyecto real.
CSS intermedio: media queries
A partir de aquí ya no es solo «que se vea bien», es que se vea bien en cualquier pantalla. El diseño responsive deja de ser un extra el día que tu web recibe la primera visita desde el móvil — y hoy eso pasa el primer día.
- Responsive web design basics (web.dev) — el punto de partida más claro que existe sobre el tema.
- Media Queries Demystified: min-width y max-width (Email on Acid) — la diferencia entre ambos enfoques explicada sin rodeos.
- What is Mobile First? (SmartBear) — por qué diseñar primero para móvil y ampliar después, no al revés.
- How To: Responsive Top Navigation (W3Schools) — un ejemplo práctico para aplicar lo anterior a un caso real.
CSS intermedio: transiciones y animaciones
Aquí es donde el CSS deja de ser estático. No hace falta JavaScript para que un botón reaccione al pasar el ratón o para que un elemento aparezca con suavidad — con transiciones y animaciones nativas de CSS llega para el 90% de los casos.
- Vídeo: tutorial de transiciones CSS — si prefieres verlo en acción antes de leer la sintaxis.
- CSS Transitions (W3Schools)
- An Interactive Guide to CSS Transitions (Josh W. Comeau) — mi enlace favorito de todo este apartado: demos interactivas que te dejan tocar cada propiedad en vivo.
- CSS 2D Transforms (W3Schools)
CSS intermedio: metodología BEM
Cuando un proyecto crece, nombrar clases «a ojo» pasa factura: acabas con .card, .card2 y .card-final-bueno en el mismo archivo. BEM (Block, Element, Modifier) es la convención de nombres más extendida para evitarlo, y una vez la entiendes no vuelves atrás.
- BEM 101 (CSS-Tricks) — la introducción más clara para entender el porqué antes que la sintaxis.
- BEM: introducción oficial (getbem.com) — la documentación de referencia, con la sintaxis exacta de bloque, elemento y modificador.
CSS avanzado: preprocesadores con Sass
Sass añade a CSS lo que cualquier lenguaje de programación da por hecho: variables reales, anidación, funciones reutilizables. No es obligatorio para trabajar con CSS, pero en proyectos medianos o grandes ahorra muchísimo tiempo y hace el código más fácil de mantener.
- Variables (documentación oficial de Sass)
- Sass Nested Rules and Properties (W3Schools)
- Partials (documentación oficial) — cómo dividir tu Sass en varios archivos sin generar CSS de más.
- @mixin y @include (documentación oficial) — bloques de código reutilizables, el motivo por el que mucha gente adopta Sass.
- @import (documentación oficial)
- Operators (documentación oficial) — operaciones matemáticas directamente en tus estilos.
- @function (documentación oficial)
¿Prefieres un curso guiado en vez de piezas sueltas? Échale un vistazo a este curso de CSS avanzado en Udemy, o si prefieres tenerlo en papel como referencia de consulta, este libro de CSS avanzado en Amazon.
CSS avanzado: arquitectura
BEM te da una convención de nombres; la arquitectura CSS te da el mapa de dónde vive cada cosa dentro del proyecto — en qué orden se cargan los archivos, qué especificidad se permite en cada capa, cómo evitas que dos desarrolladores se pisen los estilos. Es la etapa que más se salta la gente autodidacta, y la que más se nota cuando un proyecto crece.
- SMACSS (Scalable and Modular Architecture for CSS) — organiza los estilos en cinco categorías (base, layout, módulo, estado, tema); es la metodología de arquitectura más citada junto a BEM.
- Gestionar proyectos CSS grandes con ITCSS (Creative Bloq, explicando el sistema de Harry Roberts) — organiza el CSS por especificidad creciente, de lo más genérico a lo más específico, para que el orden de carga nunca te dé sorpresas.
No necesitas adoptar SMACSS o ITCSS al pie de la letra desde el primer proyecto. Lo que sí te recomiendo es leer los dos por encima aunque solo sea para robarles la idea central: separar el CSS por capas de responsabilidad, no por página o por componente suelto.
CSS frameworks
Con todo lo anterior ya tienes criterio propio para juzgar un framework en vez de usarlo a ciegas — que es justo el motivo por el que dejo esta etapa para el final. Aquí tienes las tres opciones que de verdad dominan el terreno ahora mismo, con lo que gana y lo que pierde cada una.
- Tailwind CSS — framework de utilidades: escribes clases pequeñas y combinables directamente en el HTML en vez de CSS aparte. Es el que más está creciendo en proyectos nuevos; a cambio, el HTML se llena de clases y tiene curva de aprendizaje propia.
- Bootstrap — el framework de componentes clásico: botones, tarjetas, modales y grid ya montados. Sigue siendo la opción más rápida para prototipar o para quien viene de fuera del mundo CSS.
- Bulma — como Bootstrap, pero solo CSS puro (sin JavaScript incluido) y basado en Flexbox de raíz. Buena opción intermedia si quieres componentes ya hechos pero sin cargar con JS que no vas a usar.
Mi recomendación honesta: si ya dominas Flexbox y Grid (etapa 3 de esta ruta), prueba primero a maquetar sin framework un proyecto pequeño. Vas a entender mucho mejor lo que Tailwind, Bootstrap o Bulma están haciendo por ti una vez los adoptes.
Preguntas frecuentes sobre esta hoja de ruta CSS
¿Cuánto se tarda en aprender CSS siguiendo esta ruta?
Depende de tu ritmo y de si ya tienes algo de HTML. Con dedicación constante, las cuatro primeras etapas (fundamentos) se cubren en unas semanas; llegar cómodo hasta arquitectura y frameworks lleva varios meses de práctica real, no solo de lectura.
¿Necesito saber Sass antes de aprender un framework como Tailwind?
No. Son etapas paralelas, no dependientes entre sí. Puedes aprender Tailwind justo después de dominar Flexbox y Grid sin haber tocado Sass — el orden de esta ruta es una sugerencia pensada para cubrir todo el terreno, no una dependencia estricta a partir de la etapa 5.
¿BEM y SMACSS/ITCSS son lo mismo?
No, resuelven problemas distintos y se complementan. BEM te dice cómo nombrar tus clases; SMACSS e ITCSS te dicen cómo organizar y ordenar tus archivos. Es habitual usar BEM para nombrar dentro de una estructura tipo ITCSS.
¿Vale la pena aprender CSS puro si ya voy a usar un framework?
Sí, y es justo el motivo de dejar los frameworks para la última etapa de esta ruta. Un framework te da velocidad, pero cuando algo no sale como esperas, quien entiende el CSS de debajo soluciona el problema en minutos; quien no, se queda bloqueado.
Si en algún punto del camino prefieres que te lo resuelva yo directamente, aquí tienes mis servicios de diseño web y SEO. Y si quieres seguir ampliando por tu cuenta, tengo también la hoja de ruta general de desarrollador web y la hoja de ruta para aprender JavaScript, las otras dos rutas de aprendizaje del blog.
