CSS
Un motor de layout que programas describiendo restricciones, y que se volvió genuinamente bueno.
- Primera versión
- 1996
- Creado por
- Proposed by Hakon Wium Lie; developed by the W3C CSS Working Group
- Tipado
- Declarativo, con cascada y herencia
- Extensiones de archivo
- .css
Para qué sirve
CSS se encarga de la presentación, separada del contenido. Lo que lo vuelve extraño es la restricción bajo la que trabaja: tiene que maquetar documentos cuyo tamaño, tipografía, idioma y dirección de lectura son desconocidos cuando lo escribes. Ningún diseñador de imprenta ha tenido jamás ese problema. La cascada, la herencia y la especificidad existen para que muchas descripciones parciales, venidas de fuentes distintas, se resuelvan en una sola respuesta.
La última década lo transformó. Flexbox y Grid reemplazaron los hacks con float y tablas que definieron a una generación del desarrollo web. Las propiedades personalizadas convirtieron los temas en una característica del lenguaje. Las container queries por fin permiten que el layout de un componente dependa de su propio espacio y no del viewport. Layouts que antes pedían JavaScript hoy son un puñado de declaraciones.
Sigue siendo genuinamente difícil, y la dificultad nunca fue la sintaxis. Los conflictos de especificidad, los stacking contexts, el colapso de márgenes y las sutilezas del dimensionado intrínseco son donde se van las horas. Por eso las capas, :is() y :where() importan más de lo que suenan.
De dónde viene
Hakon Wium Lie propuso Cascading Style Sheets en el CERN en 1994 y lo desarrolló con Bert Bos. El W3C publicó CSS1 en 1996. La cascada, que reconcilia los estilos del autor, del usuario y del navegador, fue la idea que lo distinguió de las propuestas rivales de la época.
CSS2 llegó en 1998, pero el soporte de los navegadores fue tan desparejo durante tanto tiempo que la mayor parte de los 2000 se fue en workarounds y no en el lenguaje en sí. Dividir CSS3 en módulos independientes, cada uno con su propia versión, es la razón de que nunca haya existido un CSS4 y nunca vaya a existir. Color, grid, selectores y animaciones avanzan cada uno a su propio ritmo.
El soporte convergió a finales de la década de 2010 y el ritmo desde entonces ha sido notable: grid, propiedades personalizadas, propiedades lógicas, :has(), anidamiento, capas de cascada, container queries, view transitions. El CSS de 2026 es un lenguaje sustancialmente más capaz que el que la mayoría aprendió.
Cómo se siente teclearlo
CSS es lo más rítmico que hay aquí. Selector, llave, y luego propiedad: valor; repetido hasta terminar. Los dos puntos y el punto y coma caen en el mismo lugar en cada línea, lo que lo hace excelente para ganar velocidad. Las llaves anidadas de las media queries y del anidamiento moderno evitan que se vuelva mecánico.
93 pasos en 5 tours, desde lo básico hasta programas completos.
Los tours
- Selectores y el modelo de cajaSelectores y el modelo de caja, es decir, las dos cosas de las que depende todo lo demás en CSS. 26 pasos.
- Flexbox y gridFlexbox y grid, que entre los dos jubilaron a una generación de hacks con float y tablas. 24 pasos.
- CSS responsivo y modernoLo que CSS ganó en los últimos años, que es mucho. 21 pasos.
- Dar estilo a componentesDar estilo a las cosas que se resisten a llevarlo. 13 pasos.
- Organizar el CSSNueve pasos sobre cómo mantener cuerda una hoja de estilos cuando crece. 9 pasos.
Documentación oficial
- Referencia de CSS en MDN
- Borradores del CSS Working Group
- Guía de layout de CSS en MDN
- Can I use
- Página de CSS del W3C