Estilizando o Projeto Text Decoder Challenge

Vamos começar a falar sobre como estilizar o componente Header no Text Decoder Challenge de uma maneira simples e divertida. No React, estilizar componentes é como escolher roupas: cada componente tem seu "guarda-roupa" exclusivo, e queremos evitar que uma peça de roupa acabe parando no armário errado. É aqui que entra o CSS Modules, nossa mágica para manter os estilos organizados e evitar bagunça!

Passos para Desenvolver o Componente Header

1. Criando o Componente: Primeiro, vamos criar nosso componente Header. Ele vai exibir a logo do projeto e ser o ponto inicial de nosso layout. O código básico é assim:

import React from "react";
import img_logo from "../../assets/logo.png";
import styles from "./Header.module.css";

export function Header() {
  return (
    <header className={styles.container_header}>
      <a href="#">
        <img src={img_logo} alt="Logo da Alura" />
      </a>
    </header>
  );
}

Simples, né? Estamos apenas retornando a imagem da logo. Mas, calma! Vamos deixar isso mais bonito com estilos.

1. CSS Modules: Mantendo o estilo organizado e seguro

Imagine que você tem uma casa cheia de portas com o mesmo nome. Sempre que você diz "abra a porta", todas se abrem ao mesmo tempo. O caos, né? É o que pode acontecer com o CSS global! O CSS Modules resolve isso, dando a cada "porta" um nome exclusivo, garantindo que não haja confusão. Ou seja, as classes que você cria nos arquivos .module.css são únicas para o componente onde são usadas.

No código acima:

import styles from "./Header.module.css";

Aqui estamos importando os estilos locais do CSS, ou seja, cada classe que criamos no arquivo Header.module.css será exclusiva ao componente Header. Isso previne o conflito de estilos em outros componentes da aplicação, mantendo nosso código limpo e organizado.

2. Flexbox: O mestre da organização no layout

Agora, vamos falar de Flexbox. Imagine o Flexbox como um chefe que adora organizar suas coisas no espaço disponível de forma eficiente. No caso do nosso header, usamos as propriedades display: flex, justify-content e align-items para controlar o posicionamento da logo dentro do cabeçalho:

.container_header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 2rem;
}

O Flexbox faz com que o logo se alinhe ao início (esquerda) do cabeçalho, tanto na horizontal (justify-content) quanto na vertical (align-items). É uma maneira poderosa de criar layouts dinâmicos sem precisar de muitos truques no CSS!

3. Medidas relativas com rem: Tornando o layout adaptável

Finalmente, as medidas relativas como rem são a chave para a responsividade. O rem é uma unidade de medida relativa ao tamanho da fonte raiz do documento (geralmente 16px). Usar rem permite que o layout se ajuste de forma suave e proporcional quando o tamanho da fonte padrão muda. Veja o exemplo:

.container_header img {  
    height: 3rem;
    max-width: 25rem;
    margin-left: 3rem;
    padding: 0.3rem 2.3rem;
}

Aqui, o tamanho da imagem e o espaçamento ao redor são baseados em rem, o que significa que se o usuário aumentar o tamanho da fonte no navegador, todo o layout vai se ajustar automaticamente, mantendo a proporção e ficando mais acessível.