UC02651 · Construir estilos em CSS

Introdução

O CSS (Cascading Style Sheets) é a linguagem que define a apresentação das páginas web. Dominar CSS é construir interfaces que são bonitas, responsivas, mantíveis e acessíveis. Esta UC (25h) cobre desde os fundamentos (selectores, especificidade, box model) até ao layout moderno (Flexbox e Grid), responsividade, funcionalidades avançadas (variáveis, calc, nesting), metodologias de organização (BEM, utility-first) e ferramentas (Sass, PostCSS, DevTools).

O objectivo é capacitar o aluno a escrever o CSS completo de uma página responsiva com qualidade profissional.

1. CSS fundamentos

1.1 Sintaxe

selector {
  propriedade: valor;
}

Exemplo:

.titulo {
  color: #4F46E5;
  font-size: 2rem;
  margin-bottom: 1rem;
}

O CSS liga-se ao HTML via <link rel="stylesheet" href="estilo.css">.

1.2 Selectores

As classes são a base de um CSS organizado e reutilizável.

1.3 Especificidade

A especificidade determina qual regra ganha em conflito. Conta-se como (inline, id, classe, tag):

inline (1,0,0,0) > id (0,1,0,0) > classe (0,0,1,0) > tag (0,0,0,1)

• #menu .item (0,1,1,0) vence .item (0,0,1,0).
• !important sobrepõe-se a tudo — evitar (cria guerras de especificidade).

Boa prática: manter a especificidade baixa e plana (sobretudo classes) para um CSS fácil de manter.

1.4 Box model

Cada elemento é uma caixa com quatro zonas:

margin → border → padding → content

Com box-sizing: content-box (default), width conta só o conteúdo. Com box-sizing: border-box, width inclui padding e border — muito mais previsível. Reset recomendado:

*, *::before, *::after { box-sizing: border-box; }

1.5 Cascata e herança

• Cascata: quando várias regras se aplicam, decide-se por (1) origem/importância, (2) especificidade, (3) ordem no ficheiro (a última ganha).
• Herança: certas propriedades passam dos pais aos filhos (ex: color, font-family, line-height); outras não (ex: margin, border).

body { font-family: system-ui; color: #222; } /* herdado por todo o texto */

Compreender ambas evita a confusão clássica de "o estilo não muda".

2. Layout moderno

2.1 Flexbox

O Flexbox alinha e distribui elementos ao longo de um eixo (linha ou coluna).

.barra {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* eixo principal */
  align-items: center;           /* eixo cruzado */
  gap: 1rem;
}

2.2 Grid

O Grid organiza em duas dimensões (linhas e colunas).

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;   /* sidebar + conteúdo */
  grid-template-rows: auto 1fr auto;  /* header, main, footer */
  gap: 1rem;
}

Conceitos: - grid-template-columns/rows: define a grelha (fr = fracção do espaço livre). - repeat(3, 1fr): repetição. - grid-column / grid-row: posicionar/expandir itens. - grid-template-areas: layout por nomes. - minmax() e auto-fit/auto-fill: grelhas responsivas.

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

2.3 Flexbox vs Grid

Combinam-se naturalmente: Grid para o esqueleto da página, Flexbox dentro dos componentes.

3. Responsive design

3.1 Mobile-first

Escrever primeiro o estilo base (mobile) e acrescentar com min-width:

.card { width: 100%; }              /* base: mobile */

@media (min-width: 768px) {
  .card { width: 50%; }             /* tablet+ */
}
@media (min-width: 1024px) {
  .card { width: 33.33%; }          /* desktop */
}

Vantagem: base simples + melhorias progressivas; melhor desempenho em mobile.

3.2 Media queries

@media (min-width: 1024px) { /* ... */ }
@media (max-width: 600px) { /* ... */ }
@media (prefers-color-scheme: dark) { /* tema escuro */ }

Breakpoints típicos: ~480, 768, 1024, 1280 px — mas definir conforme o conteúdo "parte", não por modelos específicos.

3.3 Unidades relativas

Preferir relativas a px torna o layout flexível e respeita as preferências de tamanho de fonte do utilizador.

3.4 clamp(), min(), max()

clamp(min, ideal, max) cria valores fluidos com limites, reduzindo media queries:

.titulo { font-size: clamp(1.5rem, 4vw, 3rem); }
.seccao { padding: clamp(1rem, 5vw, 4rem); }

min() e max() escolhem entre valores conforme o contexto.

4. CSS avançado

4.1 Custom properties (variáveis)

:root {
  --cor-primaria: #4F46E5;
  --cor-texto: #1a1a1a;
  --espaco: 1rem;
  --radius: 8px;
}
.botao {
  background: var(--cor-primaria);
  padding: var(--espaco);
  border-radius: var(--radius);
}

Vantagens sobre variáveis Sass: existem em tempo de execução — podem mudar por media query (dark mode), por classe ou por JS.

@media (prefers-color-scheme: dark) {
  :root { --cor-texto: #eaeaea; }
}

4.2 calc()

Combina unidades em cálculos:

.conteudo { width: calc(100% - 240px); }      /* total menos sidebar */
.elemento { margin-top: calc(var(--espaco) * 2); }

4.3 Pseudo-classes e pseudo-elementos

.aviso::before { content: '⚠ '; }
.lista li:nth-child(odd) { background: #f5f5f5; }

4.4 Nesting

O CSS moderno suporta aninhamento nativo (antes só em Sass):

.card {
  padding: 1rem;
  & .titulo { font-weight: 700; }
  &:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
  @media (min-width: 768px) { padding: 2rem; }
}

Agrupa regras relacionadas e melhora a legibilidade.

5. Metodologias e organização

5.1 Porquê

À medida que cresce, o CSS torna-se difícil: conflitos, especificidade descontrolada, medo de apagar. As metodologias dão convenções.

5.2 BEM

BEM (Block, Element, Modifier) nomeia de forma previsível:

.card { }              /* Block — componente */
.card__titulo { }      /* Element — parte do bloco */
.card__imagem { }
.card--destaque { }    /* Modifier — variante */

<article class="card card--destaque">
  <img class="card__imagem">
  <h3 class="card__titulo">Título</h3>
</article>

Vantagens: nomes auto-explicativos, especificidade plana (tudo classes), sem fugas de estilo entre componentes.

5.3 Utility-first (Tailwind)

Abordagem oposta: classes utilitárias compõem o estilo directamente no HTML.

<div class="flex items-center gap-4 p-4 rounded-lg shadow bg-white">

• Prós: muito rápido, consistente (valores do sistema), sem nomear tudo, sem CSS morto.
• Contras: HTML "carregado", curva de aprendizagem das classes.

Ambas as filosofias (BEM e utility-first) são válidas; a escolha depende do projecto/equipa.

5.4 Arquitectura escalável

Ordem recomendada de um stylesheet: 1. Reset/normalize + box-sizing. 2. Variáveis (tokens). 3. Base (tipografia, elementos). 4. Layout (grelhas, secções). 5. Componentes (um bloco por componente). 6. Utilitários.

Princípios: especificidade baixa e consistente, componentes isolados, variáveis centralizadas, pensar em sistema e não em páginas avulsas. Abordagens como ITCSS organizam por especificidade crescente.

6. Pré-processadores e ferramentas

6.1 Sass

O Sass estende o CSS com funcionalidades que compilam para CSS normal:

$primaria: #4F46E5;
$espaco: 1rem;

.botao {
  background: $primaria;
  padding: $espaco;
  &:hover { background: darken($primaria, 10%); }
}

Funcionalidades: variáveis, nesting, mixins, funções, partials/@use, @if/@each (loops).

6.2 Mixins e funções

@mixin flex-centro {
  display: flex;
  justify-content: center;
  align-items: center;
}
.caixa { @include flex-centro; }

@mixin breakpoint($min) {
  @media (min-width: $min) { @content; }
}
.card { @include breakpoint(768px) { padding: 2rem; } }

Reutilizar blocos de estilo evita repetição (princípio DRY).

6.3 PostCSS

O PostCSS transforma CSS com plugins no processo de build: - Autoprefixer: adiciona prefixos de browser automaticamente. - Minificação (cssnano). - Suporte a sintaxe futura (postcss-preset-env).

6.4 DevTools

O inspector do browser é indispensável: - Inspeccionar e editar CSS ao vivo. - Ver o box model e a cascata (que regra ganhou e porquê). - Overlays de Grid e Flexbox para depurar layout. - Device mode para testar responsividade. - Auditorias (Lighthouse).

Conclusão

Construir estilos em CSS de forma profissional combina fundamentos sólidos (selectores, especificidade, box model, cascata), layout moderno (Flexbox e Grid), responsividade mobile-first com unidades relativas e clamp(), funcionalidades avançadas (variáveis, calc, nesting), e organização com metodologias (BEM ou utility-first) e ferramentas (Sass, PostCSS, DevTools). O resultado é CSS que escala, se mantém facilmente e produz interfaces consistentes em qualquer ecrã.