[Sugestão] Utilizar variável junto a função calc()

Olá!

Na aula 03 do módulo 02, somos apresentados aos conceitos de viewport height (basicamente, a altura da janela de visualização) e também a função calc () do CSS. Com isso, é possível determinar que o banner ocupe 100% da tela visível, descontado o tamanho o tamanho do header.

.banner__image {
  height: calc(100vh - 72px);
  width: 100%;
}

Quando pensamos em linguagens de programação, é muito comum projetar esse tipo de cálculo para que o funcione independente do valor inserido. Imagine que se amanhã trocarmos a altura do header, mantendo a regra atual de CSS, o cálculo já não cumprirá mais o seu papel, uma vez que ainda estaria atrelado aos 72px. Uma sugestão seria acrescentar ao curso um tópico extra, mesmo que em texto, explicando o uso de variável em CSS e como elas podem ser úteis - dentre outras coisas - para cálculos como este.

Uma possível solução seria:

/*  Estrutura para criação de variáveis no CSS, aqui podem ser adicionadas inúmeras variáveis. Adicione no início do seu arquivo CSS   */
:root {
    --altura-cabecalho: 72px; 
}

/* Especificando a altura do cabeçalho  */
.cabecalho {
    /*  Adicione esta linha junto as demais vistas no curso, nela estamos dizendo que a altura (height) é igual a definida na variável --altura-cabecalho*/
  height: var(--altura-cabecalho);
}

/* Por fim, altere também no cálculo banner  */
.banner__image {
  height: calc(100vh - var(--altura-cabecalho));
}

Apesar de termos adicionado algumas linhas extras de código, se for preciso alterar a altura do cabeçalho basta modificar o valor da variável --altura-cabecalho e com isto, a nova altura será replicado para todas as regras que a utilizam, incluindo o próprio cálculo. Desta forma, o comportamento esperado será mantido para qualquer valor utilizado, sem que tenhamos que alterar em vários locais do código.