2015: aprendendo layout em CSS de forma meticulosa

• Material de estudo por capítulos feito para que leitores que já usaram CSS entendam o algoritmo de layout até as regras mais detalhadas
• Reexplica inline, block, z-index e o modelo de caixa não como uso básico, mas em termos de regras de decisão como formatting context e stacking context
• No fluxo normal, a posição relativa entre elementos de bloco e inline não é definida apenas por display; elementos irmãos e o contexto também influenciam
• O tamanho no modelo de caixa e o cálculo de margin: auto variam conforme o modo de posicionamento, por isso é difícil decorar tudo com uma única regra
• Passa por fluxo normal, float, posicionamento absoluto, margin collapsing, overflow, z-index, pseudo-elementos e Flexbox, chegando a problemas práticos de layout como centralização e frameworks de grid

---

Entendendo layout em CSS como um conjunto de regras

• Este material trata layout em CSS não como uma coleção de dicas, mas como um sistema baseado em regras, explicando cada uma delas ao longo dos capítulos
• Como sugere a expressão “pedantic”, adota uma abordagem que examina até detalhes aparentemente triviais e regras formais
• O público-alvo não é quem está aprendendo CSS do zero, mas quem já usa CSS e quer entender o comportamento de layout com mais rigor
• Como os sites normalmente evoluem de forma gradual, é fácil aprender layout só com pequenas dicas e truques e, nesse processo, acabar deixando de lado o próprio algoritmo de layout
• Os principais conceitos são apresentados em sequência, com exemplos práticos para verificar cada um deles

Estrutura por capítulos

• Chapter 1: Box positioning in CSS aborda como as caixas criadas pelos elementos HTML são posicionadas entre si
  • Os três principais modos de posicionamento do CSS: fluxo normal, float e posicionamento absoluto
  • No fluxo normal: anonymous box generation, formatting context, line box e alinhamento dentro da line box
  • Ordem dos floats, clearfix e a interação entre float e a altura do elemento pai
• Chapter 2: Box sizing in CSS trata do modelo de caixa e das diferenças conforme o modo de posicionamento
  • Os cálculos de height, width e margin usam mecanismos diferentes
  • Para entender como o cálculo funciona, é preciso considerar juntos o modo de posicionamento em uso e o mecanismo de cálculo
• Chapter 3: Additional properties that influence positioning organiza propriedades e mecanismos adicionais que afetam o posicionamento das caixas
  • margin collapsing, negative margins, overflow
  • max-width, max-height, min-width, min-height
  • stacking context e z-index
  • O impacto dos pseudo-elementos no layout
  • A propriedade CSS3 box-sizing
• Chapter 4: Flexbox explica o modo de layout Flexbox do CSS 3
• Chapter 5: CSS layout - tricks and layout techniques aplica o conteúdo dos capítulos anteriores a problemas reais
  • Centralização horizontal e vertical
  • Como funcionam os frameworks de grid em CSS
  • Layouts em múltiplas colunas
  • Armadilhas comuns e truques de layout
• O reference index pode ser usado para procurar um conceito ou propriedade específica e ir para o capítulo e a seção correspondentes

[GN⁺]

Comentários do Hacker News

• Ao explicar layout em CSS, a primeira coisa que se deve dizer é que existem quatro sistemas de layout diferentes: table, o mais antigo e ainda usado em emails; float, para imagens dentro do corpo do texto; flexbox, o mais usado hoje; e grid, a alternativa moderna ao table
  O posicionamento absolute e fixed também pode ser usado como um hack para contornar layout

  • absolute e fixed não são hacks e nem “contornam” layout
    Ambos são duas das cinco opções de posicionamento que definem como um elemento é colocado e se comporta dentro do fluxo do documento ou dentro de um contêiner específico: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
  • Os dois primeiros são mais próximos de sistemas de layout alternativos usados antes de flexbox e grid
    A propriedade float também pode ser usada junto com Grid. Está faltando o sistema de layout mais simples e básico, o fluxo normal: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
  • A afirmação de que “table é o sistema de layout CSS mais antigo e ainda é usado em emails” não é exatamente correta
    A marcação real de tabelas HTML é uma das formas mais antigas de posicionar partes de uma página lado a lado e também é usada em emails, mas isso é uma questão separada de CSS
    Em CSS, existem display: table e valores relacionados, mas, pelo que lembro, no IE antigo isso era mais difícil de usar do que float, e o uso também era limitado. Quase nunca vi isso ser muito usado na web moderna, talvez porque as exigências de marcação ao redor sejam rígidas demais. Por exemplo, não há como mudar a ordem, e se forem necessárias várias linhas, é preciso colocar no HTML elementos que cumpram esse papel
  • Além disso, Flexbox Froggy é a melhor forma de aprender flex, e é uma boa ideia pegar regras de css-reset feitas por outra pessoa antes de usar CSS
    Porque elas mudam comportamentos antigos de retrocompatibilidade para padrões mais sensatos. Ex.: https://www.joshwcomeau.com/css/custom-css-reset/#our-finish...
  • table não é o sistema de layout CSS mais antigo. Esse é o layout de fluxo, que estranhamente nem aparece nesta lista

• A explicação de que float “é usado para posicionar caixas nas bordas esquerda e direita da caixa contêiner” não é precisa
  Dá para fazer isso com float, mas depois do surgimento de flexbox e grid ele não é mais usado assim. Como o elemento sai do fluxo normal, esse é um jeito confuso de criar layout para quem está aprendendo CSS
  float está mais para uma ferramenta de composição tipográfica do que uma ferramenta de layout. Se o próprio texto se diz pedante, então deveria ser mais minucioso

  • Em uma introdução a HTML/CSS, é preciso explicar que essas técnicas foram criadas inicialmente apenas com o objetivo de renderizar documentos online
    Basicamente, foram feitas como uma espécie de Microsoft Word para arquivos no computador de outra pessoa, e por isso a maioria das propriedades iniciais, como float, era voltada a layout tipográfico
  • Todos os elementos dentro de um contêiner flutuam para o topo do contêiner e, dependendo se a direção do texto é ltr ou rtl, para a direita ou para a esquerda do elemento anterior
    Se não houver espaço restante, eles descem para baixo dos elementos anteriores. Se um elemento for display: block, ele ocupa toda a largura horizontal, então todos os elementos seguintes flutuam para baixo dele. É por isso que o nome é float, e esse é o modo como a posição dos elementos é calculada
    Ao usar float:left|right, você força esse elemento a flutuar para a esquerda ou para a direita antes dos demais elementos do mesmo contêiner. Claro, se o contêiner usar flex ou grid, isso deixa de funcionar assim
  • Uma grande parte do capítulo 1 (https://book.mixu.net/css/1-positioning.html#float-positioni...) trata da complexidade e do fluxo especial de float, e explica como reutilizar e aplicar com cuidado esse comportamento para outros propósitos
    Especialmente considerando que, na época em que foi escrito, não existiam layouts flexbox/grid, eu diria que é uma explicação bem minuciosa
  • O layout com flexbox fica mais simples com esta ferramenta
    Reduz a necessidade de se preocupar com várias propriedades: https://flexboxcss.com
  • Não sei muito bem como posicionar sidenotes ou notas marginais sem usar float
    Especialmente quando as notas precisam ficar alinhadas à posição de referência no meio do parágrafo

• Esse tipo de texto parece intimidador mesmo sendo anterior ao CSS Grid. Com a chegada do CSS Grid, layout em CSS ficou ainda mais complexo, e mesmo depois de 10 anos fazendo desenvolvimento web ainda dá a sensação de não conhecer a profundidade do CSS
  O jeito como funciona, situações raras de exceção, o funcionamento interno e a quantidade enorme de recursos passam essa impressão, e recentemente até escrevi sobre isso
  Antes mesmo de acompanhar todos os detalhes do Grid Layout, já surgiram subgrid e container queries. Várias propriedades adicionadas recentemente tratam casos tão específicos que fico na dúvida se algum dia vou usá-las (hanging-punctuation, font-palette e coisas assim)
  Só para hifenização de parágrafos existem pelo menos três propriedades, e muita gente pode nem saber que a propriedade filter também suporta um tipo completamente diferente de filtro usando SVG. Também dá para ajustar algoritmos de escala de imagem, e border-radius também suporta cantos elípticos
  Dá para dizer isso sobre qualquer tecnologia, mas CSS é diferente. Ele faz coisa demais, de jeito demais, e muda demais, rápido demais: https://shubhamjain.co/2024/02/19/css-impossible-thats-okay/

  • Fico curioso com o que significa “mesmo depois de 10 anos fazendo desenvolvimento web ainda não conheço a profundidade do CSS”
    Trabalho com CSS há ainda mais tempo, mas nem tento decorar se é align-items ou justify-content, então nunca lembro. No momento em que vou usar flexbox, abro https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    Com Grid eu lembro menos ainda. Mesmo assim, depois de resmungar umas vezes e soltar um WTF, quase sempre consigo fazer o que quero com facilidade suficiente, então não sinto que “não conheço a profundidade”. Já ouvi muito esse tipo de comentário sobre CSS, mas na maioria dos casos acho bem fácil montar o layout desejado sem grande esforço. A diferença é que eu não guardo CSS na memória como guardo JS
  • Se você tem interesse em layout com CSS, eu recomendaria aprender primeiro Flexbox e CSS Grid
    Os dois são bem documentados e relativamente intuitivos, e especialmente o grid tem menos comportamentos estranhos
    Hoje em dia nem precisa saber tanto sobre layout de fluxo, e dá até para pular completamente float e layout com table. Basta usá-los para o propósito original: imagens flutuando dentro de conteúdo textual e tabelas de verdade
  • O problema que sempre encontro em trabalho de frontend é que todo texto parte do pressuposto de que o leitor acompanhou continuamente a evolução mais recente dos últimos 15 anos
    Quando recebi dólares pelo meu primeiro trabalho real de frontend, eu ainda estava gerando DHTML direto em perl. Só de digitar essa sigla já dá para sentir como ela sumiu da minha memória muscular
    Frontend parece aquele caso de uma criança de seis anos já saber cálculo, então hoje parece que não existe mais jeito de alcançar todo o resto
  • Comigo é parecido. Eu simplesmente começo a usar grid em tudo quanto é lugar e na maioria das vezes funciona bem
    Também ajuda bastante o fato de eu usar CSS puro e normalmente nem ter uma folha de estilos global
  • Poderia ser pior. Poderia ser LaTeX

• Eu desenvolvo muitos apps de UI e uso Angular na maior parte do tempo, então hoje em dia simplesmente uso frameworks como Bootstrap ou Foundation
  A enorme quantidade de opções de layout no CSS puro é sufocante e dá dor de cabeça, especialmente em design responsivo. Já tentei usar CSS puro, mas no fim acabei usando muito boilerplate e montando algo parecido com um mini framework
  A menos que eu esteja criando o site de um designer sob medida, pessoalmente não vejo motivo para continuar reinventando a roda

  • Ainda existe um pouco de boilerplate, mas gosto do Open Props por ser uma abordagem híbrida
    Não é que CSS necessariamente reinventa a roda; ele permite tornar layouts difíceis e tarefas que antes exigiam JS mais fáceis e mais poderosas
    Bootstrap também é bom, mas para resolver problemas de layout mais avançados acabo inspecionando bastante os elementos para ver que estilos estão realmente sendo aplicados. Pelo menos essa foi a minha experiência, por isso eu pessoalmente aposto mais no lado do CSS
    Um recurso novo que estou esperando é a regra @scope, porque parece que vai facilitar muito criar estilos com escopo
    https://open-props.style/
    https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
  • Recursos modernos de CSS como flexbox, grid e media query foram adicionados para reduzir a necessidade de frameworks como Bootstrap

• Este texto foi escrito antes de CSS Grid e das CSS columns?
  Também tem um texto sobre z-index: https://philipwalton.com/articles/what-no-one-told-you-about...

  • Sim. Segundo https://book.mixu.net/, ele foi escrito em 2015, e sendo um texto de 9 anos atrás fico preocupado se ainda seria muito útil para CSS moderno

• Só de ver que o capítulo 3 trata de margin collapsing e negative margins, já dá para perceber que este texto prioriza entender técnicas antigas de layout
  Isso tem valor ao lidar com codebases legados, mas em projetos novos é melhor evitar

• Qual é a melhor forma de aprender CSS a fundo? A documentação oficial parece meio estranha sobre o que é ou não válido hoje em dia

  • Usar “actual” no sentido de “current” foge um pouco do tema, mas é uma das expressões do inglês da UE de que eu gosto
    Pensando que em holandês current é traduzido como actueel e actual como daadwerkelijk, faz bastante sentido. Se isso confunde falantes nativos, talvez até acabe ajudando
  • Acho que a melhor forma é construir coisas repetidamente
    Pode ser algo que combina com um estilo específico de aprendizado, mas, na prática, mexer de fato com estilos e layout faz o lado prático do funcionamento realmente entrar no corpo
    Quando uso CSS, tento escrever o mínimo possível. Não porque eu odeie CSS — na verdade, acho que ele tem uma má reputação injusta —, mas porque assim dá para aprender a estilizar layouts de forma mais eficaz sem sobrepor declarações demais
  • Esta semana, enquanto reaprendia tecnologias de frontend, fiz um pouco de pesquisa de mercado
    O melhor material que encontrei para fundamentos de CSS foi https://web.dev/learn/css, e ele também cobre flexbox e grid
    Como diretriz de design, recomendo Refactoring UI. Tem muitos conselhos práticos que faltam em livros como The UX Book
    Nos meus projetos, uso TailwindCSS e os componentes do Daisy UI, dos autores de Refactoring UI, então na prática não escrevo CSS puro. No começo, TailwindCSS parece uma regressão para CSS inline, mas é simplesmente melhor do que as alternativas. Recomendo experimentar
  • Fico curioso sobre o que “documentação oficial” quer dizer aqui. A especificação[1], ou o MDN[2]?
    [1] https://drafts.csswg.org/
    [2] https://developer.mozilla.org/en-US/docs/Web/CSS
    A primeira não é material de estudo para novos desenvolvedores web. A segunda também não é oficial nem normativa, mas geralmente traz informações sobre suporte Baseline e tabelas de compatibilidade entre navegadores
  • Vale a pena aprender flexbox, o modelo de caixa e, em especial, quando usar margin e padding
    Também é bom entender como funciona a cascata de estilos, e assim dá para compreender por que usar SCSS e desenvolvimento baseado em componentes ajuda a não precisar se preocupar tanto com isso
    Aprenda também media queries e segmentação por tamanho de tela. Acima de tudo, não precisa ter vergonha de pesquisar na web “como fazer x em CSS”. A especificação é enorme e há muita coisa para decorar, então, se você não usa com frequência por muito tempo, não dá para lembrar de tudo