Cascata, caixa e valores

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

As regras da Biblioteca da Ribeira já existem. Agora você vê quem ganha quando duas regras brigam, como a caixa de cada elemento é medida e quais unidades usar. O acervo fictício não muda de história; muda o controle visual.

O exemplo deste capítulo é 09-cascata-caixa-e-valores, no pacote que acompanha o volume. Em estilos.css, mude uma declaração (por exemplo o padding de main), preveja a caixa, recarregue e confira nas ferramentas do navegador.

O CSS no disco é texto. A página montada aplica cascata e modelo de caixa. 127.0.0.1 entrega os mesmos arquivos. Publicar não altera a matemática da caixa: só muda quem consegue pedir o arquivo.

O que você vai aprender

• Resolver conflito por origem, especificidade e ordem.
• Ler conteúdo, padding, borda e margem.
• Escolher px, rem, % e min().
• Entender overflow.
• Pintar fundo e borda sem quebrar o texto.

Cascata e especificidade

Se duas regras valem para o mesmo elemento, o navegador compara origem, importância (!important — evite), especificidade e, no empate, a ordem no arquivo.

Tipo vale menos que classe. Classe vale menos que id. Estilo no atributo style vale ainda mais. Não use id só para “ganhar” do CSS.

Mude só .brand { color: #fff; } para um amarelo claro. Recarregue. O nome da biblioteca no cabeçalho deve mudar; o menu, se tiver outra regra, pode não mudar.

Camadas (@layer) existem para organizar a ordem de origem. Neste volume você não precisa delas. Basta um arquivo estilos.css e a disciplina de uma mudança por vez.

Modelo de caixa

Todo elemento visível é um retângulo. Conteúdo no centro. Padding em volta, com a cor de fundo. Borda no traço. Margem do lado de fora, transparente.

Com box-sizing: content-box (inicial), width é só o conteúdo. Padding e borda somam para fora. Com border-box, width já inclui padding e borda. Este volume usa * { box-sizing: border-box; }.

* { box-sizing: border-box; }
.wrap {
  width: min(60rem, calc(100% - 2rem));
  margin-inline: auto;
}
.cartao {
  flex: 1 1 16rem;
  background: #fff;
  border: 1px solid #d5cfc4;
  padding: 1rem;
}

Unidades

px é absoluto na prática da tela. rem cresce com a fonte raiz: melhor para texto. % depende do pai. min(60rem, calc(100% - 2rem)) limita a faixa da Ribeira no desktop e encolhe no celular.

Não misture dez unidades numa única regra sem motivo. Uma mudança por experimento.

No cartão de Maré Alta, padding: 1rem respira com a fonte. Se você trocar para 20px e o leitor aumentar o tipo, o espaço interno não acompanha. Por isso rem costuma ser melhor em texto.

Overflow e fundo

Se o conteúdo não cabe, overflow decide: visível, recorte (hidden) ou rolagem. Não esconda texto da agenda com overflow: hidden só para “ficar bonito”.

Fundo (background) pinta a caixa, inclusive o padding. Borda desenha o limite. Imagem de fundo não substitui a img da fachada: a fachada tem alt; o fundo decorativo, não.

Um recorte mínimo para conferir caixa e fundo, se você quiser um arquivo só:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Caixa — Ribeira</title>
    <style>
      * { box-sizing: border-box; }
      .cartao {
        width: 16rem;
        padding: 1rem;
        border: 1px solid #d5cfc4;
        background: #fff;
      }
    </style>
  </head>
  <body>
    <p class="cartao">Caderno do Cais, de Lina Bezerra. Empréstimo fictício.</p>
  </body>
</html>

A pasta do exemplo 09 já tem o site completo. Use-a como referência.

Erro comum: largura que “estoura”

Erro comum: width: 100% mais padding com content-box. A caixa fica maior que o pai e aparece uma rolagem horizontal. Confira box-sizing e a ordem das regras.

Outro erro: duas folhas, a genérica por último cobrindo a específica que você acabou de escrever.

Disco, teste e publicação

Inspecionar a caixa no navegador mostra pixels calculados, não o arquivo. O arquivo no disco continua com rem e %. Em http://127.0.0.1:8765/exemplos/09-cascata-caixa-e-valores/ o cálculo é o mesmo. Publicar não “corrige” overflow; só espalha o bug.

Atividades

1. Entre p { color: black; } e .hero p { color: #1a1a1a; }, qual tende a ganhar e por quê?
2. O que border-box muda no significado de width?
3. overflow: hidden no main é uma boa ideia se um parágrafo da agenda crescer?

Respostas comentadas

1. .hero p tende a ganhar: tem classe + tipo, especificidade maior que só o tipo p. No empate de especificidade, vence a regra que vem depois no CSS.
2. width passa a incluir conteúdo, padding e borda. Fica mais fácil alinhar cartões da biblioteca sem somar na mão.
3. Não. O texto extra some da tela e da rolagem. Prefira deixar crescer ou usar rolagem consciente. Esconder não é layout.