Compartilhar valores com variáveis CSS

Neste capítulo você vai alterar um valor compartilhado e conferir seus efeitos no projeto. O objetivo é terminar uma tarefa pequena e conferir seu resultado no Mirante do Mucuripe.

Seu ponto de partida

Estude depois do capítulo 12. Retome a referência se uma experiência anterior ficou alterada. Use o exemplo 13-variaveis-css do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa. Você não precisa copiar arquivos da etapa anterior.

Abra index.html da sua cópia no navegador e o mesmo arquivo num editor de texto simples. Para mídia, ferramenta de conferência e JSON, use o teste HTTP local explicado no README. Abrir ou testar não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Anote sua previsão antes de salvar e recarregar. Compare o resultado e investigue o erro antes de avançar. Ao terminar cada experiência, restaure somente a mudança indicada, para que a próxima parta dos valores da referência. Você pode parar depois de uma lição.

Um nome pode expressar a intenção do valor

Uma propriedade personalizada de CSS começa com dois hífens. Na referência, —cor-acao guarda a cor do preenchimento dos botões. Ela é declarada em :root, que representa o elemento raiz, e lida com var. O nome explica o papel; não precisa descrever uma cor específica porque ela pode mudar. Alterar esse valor evita procurar vários preenchimentos iguais pela folha. Ainda é necessário conferir contraste de todos os estados afetados. Um valor central bem nomeado ajuda a manter coerência, mas não decide sozinho se a nova apresentação é legível.

Faça na sua cópia

Confira :root e background do botão. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

:root { --cor-acao: #235b5b; }
button { background: var(--cor-acao); }

Mude uma coisa e preveja

Troque somente o valor —cor-acao por #713014.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Os botões que usam a variável mudam juntos; links que usam sua própria cor não mudam.

Se não acontecer

Confira se background lê var(—cor-acao). Um valor literal no componente não acompanha a variável.

A variável participa da cascata

Propriedades personalizadas seguem a cascata e normalmente são herdadas. Isso permite trocar um valor num contexto mais específico. Também exige saber onde o valor foi declarado: uma regra no cartão pode afetar seus descendentes e não o resto do site. Não acrescente uma segunda variável com quase o mesmo nome para consertar uma digitação. —espaco-card e —espaco-cards são nomes distintos. Use uma lista pequena de valores necessários antes de criar um sistema de dezenas de nomes que o aluno ainda não usa.

Faça na sua cópia

Confira o preenchimento dos cartões. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

:root { --espaco-card: 1rem; }
.card { padding: var(--espaco-card); }

Mude uma coisa e preveja

Troque somente —espaco-card de 1rem para 1.25rem.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O preenchimento muda nos dois cartões que leem o mesmo valor. A estrutura da grade permanece.

Se não acontecer

Confira grafia e chaves. Não altere gap se a experiência é de espaço interno.

Reutilizar não significa centralizar tudo

Tokens de design são valores nomeados que expressam decisões repetidas, como cor de ação e espaço. Neste volume, a implementação é uma lista curta de variáveis CSS. Um valor usado uma vez pode continuar na regra local. Centralizar todos os números pode dificultar a leitura e misturar necessidades diferentes. A escolha começa no que precisa ser compartilhado. Depois de mudar uma cor, confira botões, foco e texto; depois de mudar espaço, confira tela estreita. Uma alteração coerente ainda pode produzir um resultado ruim se ninguém verificar seus efeitos.

Faça na sua cópia

Compare valores compartilhados e regras locais. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

.selo { top: .6rem; right: .6rem; }

Mude uma coisa e preveja

Mantenha as variáveis e mude somente right do selo para 1rem.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A distância do selo muda localmente. Não há obrigação de criar uma variável para essa experiência isolada.

Se não acontecer

Se outro componente mudar, confira o seletor que alterou. Uma classe mais ampla pode ter atingido mais elementos.

A captura mostra uma parte da referência. Abra o exemplo para conferir a página inteira. Uma experiência temporária pode produzir outra aparência; restaure os valores antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia da base. Tente primeiro; depois compare seus resultados com os comentários.

1. Mude a cor de ação e liste o que acompanhou a mudança.

2. Mude o espaço compartilhado dos cartões e confira uma janela estreita.

3. Justifique um valor central e um valor local.

Respostas comentadas

Compare o que você previu com o que observou. Uma solução diferente pode funcionar se mantiver o conteúdo e a tarefa acessíveis.

1. Botões que leem var(—cor-acao) acompanham o valor. Outros componentes só mudam se também usarem essa propriedade.

2. Padding muda dentro dos cartões; gap continua controlando a distância entre eles. Confira se o conteúdo ainda cabe.

3. Cor repetida de ação é uma decisão compartilhada. Uma distância específica do selo pode continuar na regra local para facilitar a leitura.

Quando seguir

Você nomeia valores necessários, reconhece a cascata e confere os componentes afetados. Se ainda houver dúvida, repita somente a experiência que precisa esclarecer.

O arquivo completo

Referência do exemplo 13-variaveis-css, reproduzida aqui para que você possa conferir sem sair da página.

assets/simulacao.js

const form = document.querySelector('#visita');
const send = document.querySelector('#simular');
const status = document.querySelector('#retorno');
if (form && send && status) {
  send.disabled = false;
  form.addEventListener('submit', event => {
    event.preventDefault();
    status.textContent = 'Simulação concluída. Nada foi enviado ou guardado.';
    status.focus();
  });
  form.addEventListener('reset', () => { status.textContent = ''; });
}