Oii, tudo bem?
Compreendo perfeitamente a sua frustração, André. Quando estamos começando, parece que damos voltas desnecessárias no código, não é? Vou explicar o motivo técnico por trás dessa estratégia para que você não precise assistir ao vídeo uma quarta vez.
Por que não estilizamos o checkbox diretamente?
A resposta curta é: limitação dos navegadores.
O input type="checkbox" é um elemento nativo do sistema operacional e de cada navegador (Chrome, Firefox, Safari). Eles possuem estilos internos muito rígidos que o CSS não consegue alterar completamente. Por exemplo, você não consegue mudar a cor do "check" (o tique) ou colocar bordas arredondadas de forma consistente apenas usando o seletor do input.
Para termos total liberdade visual (como pede o design no Figma), usamos um "truque":
- Escondemos o input real (mas ele continua lá para ser clicado e funcionar).
- Criamos um elemento visual do zero (o seu
span) para ser a "cara" do novo checkbox.
Por que usar uma tag span vazia?
O span funciona como uma tela em branco. Como o input original foi escondido com opacity: 0, precisamos de algo que o usuário possa ver.
Usamos o seletor de adjacência (+ span) porque ele diz ao navegador: "Quando o input estiver marcado (:checked), mude o estilo do span que vem logo depois dele".
Por que tantas classes? Não fere a clareza do código?
Pode parecer que estamos complicando, mas na verdade estamos ganhando controle e acessibilidade.
.opcao (o container): Serve para posicionar o texto e o checkbox lado a lado e garantir que, ao clicar no texto, o checkbox também seja acionado (por isso o position: relative)..opcao input: Removemos a aparência padrão "feia" do navegador..opcao span: Criamos a caixa personalizada com as cores e tamanhos do projeto..opcao input:checked + span: Define como essa caixa deve brilhar ou mudar de cor quando clicada.
O objetivo do código claro: No desenvolvimento moderno, "simples" nem sempre significa "poucas linhas", mas sim um código que funcione igual em todos os dispositivos e que aceite o design que o cliente pediu. Estilizar elementos nativos do formulário é um dos maiores desafios do CSS.
Resumo do fluxo:
- O Input cuida da lógica (marcado ou desmarcado).
- O Span cuida da beleza (cor, borda, tamanho).
- O Label/Opção une os dois para que o clique funcione em toda a área.
Espero que essa explicação tenha jogado uma luz sobre a lógica do professor. Se algum seletor específico ainda estiver confuso, pode perguntar!
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
