2015: aprender layout en CSS de forma minuciosa

 (book.mixu.net)
6 puntos por GN⁺ 2024-03-01 | 1 comentarios | Compartir por WhatsApp
  • Es un material de aprendizaje por capítulos diseñado para que lectores que ya usaron layouts en CSS entiendan el algoritmo de layout hasta sus reglas detalladas
  • Reexplica inline, block, z-index y el modelo de caja no como simples formas de uso, sino en términos de reglas de decisión como el contexto de formato y el contexto de apilamiento
  • En el flujo normal, la posición relativa de los elementos de bloque e inline no se define solo con display, sino que también influyen los elementos hermanos y el contexto
  • El cálculo del tamaño del modelo de caja y de margin: auto cambia según el método de posicionamiento, así que es difícil memorizarlo como una sola regla
  • Recorre flujo normal, float, posicionamiento absoluto, margin collapsing, overflow, z-index, pseudoelementos y Flexbox, para luego llegar a problemas prácticos de layout como centrado y frameworks de grillas

Entender el layout de CSS como reglas

  • Este material presenta el layout de CSS no como una colección de tips, sino como un sistema basado en reglas, y explica cada una siguiendo los capítulos paso a paso
  • Como sugiere la expresión “pedantic”, adopta un enfoque que presta atención incluso a detalles que parecen menores y a reglas formales
  • No está dirigido a quien aprende CSS por primera vez, sino a quien ya usa CSS pero quiere entender con más rigor cómo funciona el layout
  • Como los sitios web suelen evolucionar de forma gradual, es fácil aprender layout solo con pequeños tips y trucos, y en ese proceso pasar por alto el algoritmo de layout en sí
  • Trata los conceptos principales en orden y ofrece ejemplos de aplicación para comprobar cada concepto

Estructura por capítulos

  • Chapter 1: Box positioning in CSS trata sobre cómo se acomodan entre sí las cajas que generan los elementos HTML
    • Los tres principales métodos de posicionamiento en CSS: flujo normal, float y posicionamiento absoluto
    • En el flujo normal: anonymous box generation, formatting context, line box y alineación dentro de la line box
    • Orden de los float, clearfix e interacción entre float y la altura del contenedor padre
  • Chapter 2: Box sizing in CSS trata el modelo de caja y las diferencias según el método de posicionamiento
    • El cálculo de height, width y margin usa mecanismos distintos entre sí
    • Para entender cómo se calculan, hay que ver juntos el método de posicionamiento actual y el mecanismo de cálculo
  • Chapter 3: Additional properties that influence positioning organiza propiedades y mecanismos adicionales que afectan la disposición de las cajas
    • margin collapsing, negative margins, overflow
    • max-width, max-height, min-width, min-height
    • contexto de apilamiento y z-index
    • El efecto de los pseudoelementos sobre el layout
    • La propiedad box-sizing de CSS3
  • Chapter 4: Flexbox explica el modo de layout Flexbox de CSS 3
  • Chapter 5: CSS layout - tricks and layout techniques aplica lo visto en los capítulos anteriores a problemas reales
    • Centrado horizontal y vertical
    • Cómo funcionan los frameworks de grillas en CSS
    • Layouts de varias columnas
    • Errores comunes y trucos de layout
  • El reference index puede usarse para buscar un concepto o propiedad específica y saltar al capítulo y sección relacionados

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-03-01
Opiniones de Hacker News

  • Lo primero que habría que decir al explicar layouts en CSS es que existen cuatro sistemas de layout distintos: table, el más antiguo, que todavía se usa en correos; float, para imágenes dentro del texto; flexbox, el más usado hoy; y grid, la alternativa moderna a table
    El posicionamiento absolute y fixed también puede usarse como un hack para esquivar el layout

    • absolute y fixed no son hacks ni “esquivan” el layout
      Ambos son dos de las cinco opciones de posicionamiento que determinan cómo se ubica y se comporta un elemento dentro del flujo del documento o dentro de un contenedor específico: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    • Los dos primeros se parecen más a sistemas de layout alternativos que se usaban antes de flexbox y grid
      La propiedad float también puede usarse junto con Grid. Falta el sistema de layout más simple y básico, el flujo normal: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    • Decir que “table es el sistema de layout CSS más antiguo y todavía se usa en correos” no es del todo exacto
      El marcado real de tablas HTML fue una de las formas más antiguas de colocar partes de una página web lado a lado, y también se usa en correos, pero eso es un tema aparte de CSS
      En CSS existen display: table y valores relacionados, pero, si mal no recuerdo, en los IE antiguos era más difícil de usar que float y su uso era limitado. En la web moderna casi nunca he visto que se use mucho, quizá porque los requisitos de marcado alrededor son demasiado estrictos. Por ejemplo, no hay forma de cambiar el orden, y si se necesitan varias filas hay que poner dentro del HTML los elementos que cumplan ese rol
    • Además, Flexbox Froggy es la mejor forma de aprender flex, y antes de escribir CSS conviene traer reglas de css-reset hechas por otra persona
      Porque cambian comportamientos antiguos de compatibilidad hacia atrás por valores predeterminados más razonables. Ej.: https://www.joshwcomeau.com/css/custom-css-reset/#our-finish...
    • table no es el sistema de layout CSS más antiguo. Ese es el layout de flujo, que, extrañamente, ni siquiera aparece en esta lista

  • La explicación de que float “se usa para colocar cajas en los bordes izquierdo y derecho de una caja contenedora” no es precisa
    Se puede hacer eso con float, pero desde que aparecieron flexbox y grid ya no se usa así. Como el elemento sale del flujo normal, para quien está aprendiendo CSS es una forma confusa de construir layouts
    float es más una herramienta de composición tipográfica que una herramienta de layout. Si el texto se presenta como pedantic, debería ser más meticuloso

    • En una introducción a HTML/CSS hay que explicar sí o sí que estas tecnologías, cuando se crearon, tenían como único objetivo renderizar documentos en línea
      Básicamente se hicieron como una especie de Microsoft Word para archivos en la computadora de otra persona, por eso la mayoría de las propiedades iniciales, como float, eran para composición de layout
    • Todos los elementos dentro de un contenedor flotan hacia la parte superior del contenedor y, según si la dirección del texto es ltr o rtl, hacia la derecha o la izquierda del elemento anterior
      Si no queda espacio, bajan por debajo de los elementos anteriores. Si un elemento tiene display: block, ocupa todo el espacio horizontal, así que todos los elementos posteriores flotan debajo de él. Por eso se llama float, y es la forma en que se calcula la posición de los elementos
      Al usar float:left|right, se fuerza a ese elemento a flotar primero hacia la izquierda o la derecha antes que otros elementos dentro del mismo contenedor. Por supuesto, si el contenedor usa flex o grid, ya no se comporta de esta manera
    • Una gran parte del capítulo 1 (https://book.mixu.net/css/1-positioning.html#float-positioni...) trata la complejidad de float y su flujo especial, y explica cómo reutilizar y aplicar con cuidado ese comportamiento para otros fines
      Sobre todo considerando que, en el momento en que se escribió, no existían layouts con flexbox/grid, me parece una explicación meticulosa suficiente
    • El layout con flexbox simplifica el proceso con esta herramienta
      Reduce la necesidad de preocuparse por varias propiedades: https://flexboxcss.com
    • No tengo muy claro cómo colocar sidenotes o notas marginales sin usar float
      En especial cuando la nota tiene que alinearse con el punto de referencia en medio de un párrafo

  • Este tipo de artículo se siente abrumador incluso si es anterior a CSS Grid. Con la llegada de CSS Grid, el layout en CSS se volvió más complejo, y aunque llevo 10 años haciendo desarrollo web, sigo sintiendo que CSS no tiene fondo
    Su forma de funcionar, los casos límite raros, el funcionamiento interno y la enorme cantidad de funcionalidades; además, hace poco escribí un artículo relacionado
    Antes de poder ponerme al día con todos los detalles de Grid Layouting, aparecieron subgrid y container queries. Varias de las propiedades nuevas son tan específicas que dudo si alguna vez las usaré (hanging-punctuation, font-palette, cosas así)
    Hay al menos tres propiedades relacionadas solo con la separación silábica de párrafos, y uno podría no saber que la propiedad filter también admite un tipo de filtros completamente distinto que usa SVG. También se puede ajustar el algoritmo de escalado de imágenes, y border-radius incluso admite esquinas elípticas
    Esto podría decirse de cualquier tecnología, pero CSS es distinto. Hace demasiadas cosas de demasiadas maneras, y cambia demasiado, demasiado rápido: https://shubhamjain.co/2024/02/19/css-impossible-thats-okay/

    • Me da curiosidad qué significa eso de “aunque llevo 10 años haciendo desarrollo web, sigo sintiendo que CSS no tiene fondo”
      Llevo más tiempo trabajando con CSS, pero ni siquiera intento memorizar si es align-items o justify-content, así que no lo recuerdo. En cuanto uso flexbox, abro https://css-tricks.com/snippets/css/a-guide-to-flexbox/
      Grid lo recuerdo todavía menos. Aun así, después de quejarme un par de veces y decir WTF, puedo crear lo que quiero con bastante facilidad, así que no siento que no tenga fondo. He oído mucho ese tipo de comentarios sobre CSS, pero en la mayoría de los casos siento que es bastante fácil crear el layout que quiero sin mucho esfuerzo. Simplemente no memorizo CSS como memorizo JS
    • Si te interesa el layout en CSS, recomiendo aprender primero Flexbox y CSS Grid
      Ambos están bien documentados y son relativamente intuitivos; en particular, grid tiene pocos comportamientos raros
      Hoy en día no hace falta saber demasiado sobre flow layout, y se pueden omitir por completo los layouts con float y table. Basta con usarlos para su propósito original: imágenes flotantes dentro de contenido de texto y tablas reales
    • El problema que siempre encuentro en el trabajo de frontend es que todos los artículos asumen como lectores a personas que han seguido al día con las tendencias de los últimos 15 años
      Cuando hice mi primer trabajo real de frontend y cobré dólares, estaba generando DHTML directamente desde perl. Incluso escribir esa sigla quedó tan lejos de la caché de memoria muscular que mis dedos se traban
      Sé de frontend como un niño de seis años que sabe cálculo, así que ahora siento que ya no hay forma de ponerme al día
    • A mí me pasa algo parecido. Si simplemente empiezas a usar grid por todos lados, por lo general funciona bien
      Aunque uso CSS plano y normalmente tampoco tengo una hoja de estilos global, lo cual ayuda bastante
    • Podría ser peor. Podría ser LaTeX

  • Desarrollo muchas apps de UI y uso principalmente Angular, pero últimamente simplemente uso frameworks como Bootstrap o Foundation
    La enorme cantidad de opciones de layout en CSS puro, especialmente en diseño responsive, es abrumadora y da dolor de cabeza. Intenté usar CSS puro, pero al final terminé usando mucho boilerplate y creando algo parecido a un mini framework
    Si no estás creando un sitio web de diseñador a medida, personalmente no veo necesidad de reinventar la rueda todo el tiempo

    • Sigue habiendo algo de boilerplate, pero me gusta Open Props porque es un enfoque híbrido
      CSS no necesariamente es reinventar la rueda; permite hacer más fáciles y potentes los layouts difíciles o tareas que antes requerían JS
      Bootstrap también está bien, pero para resolver problemas de layout avanzados termino inspeccionando mucho los elementos para ver qué estilos se aplican realmente. Al menos esa fue mi experiencia, y por eso personalmente apostaría por CSS
      La nueva función que espero es la regla @scope, que parece que hará mucho más fácil crear estilos con scope
      https://open-props.style/
      https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
    • Las funciones modernas de CSS como flexbox, grid y media queries se agregaron para reducir la necesidad de frameworks como Bootstrap

  • ¿Este artículo se escribió antes de CSS Grid y CSS columns?
    También hay un artículo sobre z-index: https://philipwalton.com/articles/what-no-one-told-you-about...

    • Sí. Según https://book.mixu.net/, fue escrito en 2015, y me preocupa que un artículo de hace 9 años no sea muy útil para CSS moderno

  • Al ver que en el capítulo 3 trata margin collapsing y negative margins, este artículo prioriza entender técnicas de layout antiguas
    Tiene valor cuando se trabaja con codebases legacy, pero en proyectos nuevos es mejor evitarlas

  • ¿Cuál es la mejor forma de aprender CSS a fondo? La documentación oficial se siente un poco rara en cuanto a qué sigue vigente y qué no

    • Usar “actual” con el sentido de “current” se sale del tema, pero es una de mis expresiones de inglés europeo favoritas
      Si uno piensa que en neerlandés current se traduce como actueel y actual como daadwerkelijk, se entiende perfectamente. Si confunde a un hablante nativo, incluso puede servir de ayuda
    • Creo que la mejor forma es construir cosas una y otra vez
      Puede que esto aplique a cierto estilo de aprendizaje, pero al manipular estilos y layouts en la práctica, realmente se te queda la parte práctica de cómo funcionan
      Al usar CSS, mi objetivo es escribir lo menos posible. No porque odie CSS; al contrario, creo que tiene una mala reputación injusta, sino porque así se puede aprender a dar estilo a layouts de forma más efectiva sin acumular demasiadas declaraciones
    • Esta semana estuve retomando tecnologías de frontend e hice un poco de investigación de mercado
      El mejor recurso para los fundamentos de CSS fue https://web.dev/learn/css, e incluye flexbox y grid
      Como guía de diseño, recomiendo Refactoring UI. Tiene muchos consejos accionables que les faltan a libros como The UX Book
      En mi proyecto uso TailwindCSS, de los autores de Refactoring UI, y componentes de Daisy UI, así que en la práctica no escribo CSS crudo. Al principio TailwindCSS se siente como una regresión a CSS inline, pero simplemente es mejor que las alternativas. Recomiendo probarlo
    • Me da curiosidad qué significa aquí “documentación oficial”. ¿La especificación[1] o MDN[2]?
      [1] https://drafts.csswg.org/
      [2] https://developer.mozilla.org/en-US/docs/Web/CSS
      La primera no es un material de aprendizaje para nuevos desarrolladores web. La segunda tampoco es oficial ni una documentación autoritativa, pero normalmente tiene información sobre soporte Baseline y tablas de compatibilidad de navegadores
    • Conviene aprender flexbox, el modelo de caja y, en especial, cuándo usar margin y padding
      También conviene aprender cómo funciona la cascada de estilos, y así entender por qué se usan SCSS y el desarrollo por componentes para hacer que uno casi no tenga que preocuparse por eso
      También aprende media queries y cómo apuntar a distintos tamaños de pantalla. Sobre todo, no hay que avergonzarse de buscar en la web “cómo hacer x en CSS”. La especificación es enorme y hay mucho que memorizar, así que si no lo usas con frecuencia durante mucho tiempo, no puedes recordarlo todo