NOTAS DO PROFESSOR 📖 CSS: separar conteúdo de aparência A ideia fundadora do CSS é a separação de responsabilidades: o HTML diz o que é, o CSS diz como aparece. A anatomia de uma regra — selector, propriedade, valor — é a gramática básica que tudo o resto reutiliza. Convém que os formandos interiorizem desde já que misturar estilo no HTML torna o código difícil de manter. 🗣️ Pontos a desenvolver oralmente • Decompor a sintaxe da regra com vocabulário correcto (selector, propriedade, valor). • Mostrar a mesma página com folhas de estilo diferentes para ilustrar a separação. • Avisar contra estilos inline no HTML como hábito a evitar.

NOTAS DO PROFESSOR 📖 Selectores: apontar ao elemento certo Dominar os selectores é o que dá precisão ao CSS. A mensagem prática é que as classes devem ser a base do trabalho: são reutilizáveis e mantêm a especificidade baixa, ao contrário dos ids. Os combinadores (descendente, filho directo) e os estados (`:hover`) ampliam o que se consegue fazer sem tocar no HTML. 🗣️ Pontos a desenvolver oralmente • Justificar porque preferir classes a ids no estilo do dia-a-dia. • Distinguir descendente (espaço) de filho directo (>). • Antecipar a ligação com a especificidade no slide seguinte.

NOTAS DO PROFESSOR 📖 Especificidade: porque é que o estilo "não pega" A especificidade é a fonte número um de frustração em CSS, e perceber o sistema de pontos resolve a maioria dos problemas. A mensagem central é manter a especificidade baixa e plana, usando classes, para que as regras sejam fáceis de sobrepor. O `!important` deve ser apresentado como um último recurso a evitar, não como solução. 🗣️ Pontos a desenvolver oralmente • Calcular em conjunto a especificidade de alguns selectores de exemplo. • Mostrar um caso real de regra que "não pega" por ser menos específica. • Explicar porque o !important cria uma espiral difícil de gerir.

NOTAS DO PROFESSOR 📖 Box model: tudo é uma caixa Compreender o modelo de caixa é pré-requisito para qualquer layout: cada elemento tem conteúdo, padding, border e margin, em camadas. O ponto que mais simplifica a vida é o `box-sizing: border-box`, que faz a largura incluir padding e border, evitando contas mentais constantes. Recomenda-se aplicá-lo globalmente no reset. 🗣️ Pontos a desenvolver oralmente • Inspeccionar o box model de um elemento no DevTools. • Demonstrar o problema de larguras com content-box vs border-box. • Sugerir o reset universal com box-sizing: border-box.

NOTAS DO PROFESSOR 📖 Cascata e herança: as forças invisíveis do CSS Estes dois mecanismos explicam grande parte dos comportamentos "estranhos" do CSS. A cascata decide qual regra ganha quando há conflito (por origem, especificidade e ordem); a herança faz certos valores passarem dos pais para os filhos. Definir a fonte no `body` e vê-la propagar é a demonstração perfeita da herança. 🗣️ Pontos a desenvolver oralmente • Separar bem cascata (resolver conflitos) de herança (passar valores aos filhos). • Dar exemplos de propriedades que herdam (color, font) e que não herdam (border). • Ligar à frustração comum de "porque é que isto não muda" como motivação.

NOTAS DO PROFESSOR 📖 Flexbox: alinhar numa direcção O Flexbox é a ferramenta para alinhar elementos ao longo de um eixo, ideal para componentes como barras de navegação e cartões. A chave conceptual é distinguir o eixo principal (controlado por `justify-content`) do eixo cruzado (controlado por `align-items`). O `gap` veio simplificar enormemente o espaçamento entre itens. 🗣️ Pontos a desenvolver oralmente • Clarificar a diferença entre eixo principal e eixo cruzado conforme a direcção. • Mostrar centrar vertical e horizontalmente como exemplo clássico. • Reforçar o uso de gap em vez de margens entre itens.

NOTAS DO PROFESSOR 📖 As propriedades que dão controlo ao Flexbox Esta tabela é o kit de ferramentas prático do Flexbox. Vale a pena experimentar cada propriedade ao vivo, porque o Flexbox aprende-se melhor a mexer do que a decorar. O `flex: 1` é particularmente útil: faz um item ocupar o espaço disponível, criando layouts elásticos sem larguras fixas. 🗣️ Pontos a desenvolver oralmente • Demonstrar flex-wrap a partir os itens em várias linhas quando falta espaço. • Mostrar o efeito de flex: 1 num item a "empurrar" os outros. • Reforçar gap como forma limpa de espaçar sem margens.

NOTAS DO PROFESSOR 📖 Grid: pensar em duas dimensões O Grid é a ferramenta certa quando se trabalha em linhas e colunas ao mesmo tempo, como na estrutura de uma página ou numa galeria. O `repeat(3, 1fr)` introduz a unidade `fr`, que distribui o espaço disponível em fracções — um conceito novo e poderoso. Convém deixar claro que Grid e Flexbox não competem, complementam-se. 🗣️ Pontos a desenvolver oralmente • Explicar a unidade fr e como divide o espaço disponível. • Mostrar uma galeria responsiva com repeat e minmax. • Antecipar o slide seguinte: quando escolher Grid vs Flexbox.

NOTAS DO PROFESSOR 📖 Não é Grid OU Flexbox — é Grid E Flexbox Os formandos costumam achar que têm de escolher um dos dois, quando a resposta profissional é combiná-los. A regra prática é simples: Flexbox para alinhar numa direcção (componentes), Grid para estruturas 2D (páginas). O padrão mais comum é Grid para a maquete da página e Flexbox dentro de cada bloco. 🗣️ Pontos a desenvolver oralmente • Desfazer a ideia de rivalidade entre as duas ferramentas. • Dar a regra prática: 1D Flexbox, 2D Grid. • Mostrar um layout real onde os dois coexistem (página em Grid, card em Flex).

NOTAS DO PROFESSOR 📖 Mobile-first: começar pelo ecrã pequeno A abordagem mobile-first não é só uma moda: começar pelo ecrã pequeno obriga a focar no essencial e depois acrescentar à medida que há espaço. Tecnicamente, usar `min-width` nas media queries acumula melhorias do pequeno para o grande, o que mantém o CSS mais limpo. Dado que a maioria do tráfego é móvel, faz todo o sentido. 🗣️ Pontos a desenvolver oralmente • Justificar mobile-first com dados de tráfego móvel. • Contrastar min-width (mobile-first) com max-width (desktop-first). • Reforçar a filosofia de melhoria progressiva.

NOTAS DO PROFESSOR 📖 Media queries: adaptar ao espaço disponível As media queries são o mecanismo que torna o layout responsivo, aplicando regras conforme a largura do ecrã. O conselho mais importante, e que distingue um bom profissional, é definir breakpoints pelo conteúdo — onde o layout "parte" — e não a perseguir tamanhos de telemóveis específicos, que mudam todos os anos. 🗣️ Pontos a desenvolver oralmente • Mostrar como redimensionar a janela revela onde o layout precisa de ajuste. • Avisar contra perseguir modelos de dispositivos concretos. • Apresentar os breakpoints típicos apenas como ponto de partida.

NOTAS DO PROFESSOR 📖 Unidades relativas: layouts que se adaptam As unidades relativas são a base de um design verdadeiramente flexível e acessível. O `rem`, relativo à raiz, é a recomendação para tipografia porque respeita as preferências de tamanho de fonte do utilizador — quem aumenta a fonte do browser vê o site adaptar-se. Fixar tudo em `px` quebra essa acessibilidade. 🗣️ Pontos a desenvolver oralmente • Distinguir rem (raiz) de em (elemento) com um exemplo de aninhamento. • Mostrar o impacto de rem na acessibilidade ao aumentar a fonte do browser. • Explicar vw/vh e cuidados (ex: vh em mobile com barras dinâmicas).

NOTAS DO PROFESSOR 📖 clamp(): fluidez com limites de segurança O `clamp()` é uma das adições mais úteis do CSS moderno: define um valor mínimo, um ideal fluido e um máximo, num único parâmetro. Aplicado à tipografia, faz o texto escalar suavemente com o ecrã sem nunca ficar pequeno demais nem gigante. O resultado é menos media queries e um design mais fluido. 🗣️ Pontos a desenvolver oralmente • Decompor os três argumentos do clamp (mínimo, ideal, máximo). • Demonstrar tipografia fluida a redimensionar a janela. • Contrastar com a abordagem antiga de vários breakpoints para a fonte.

NOTAS DO PROFESSOR 📖 Custom properties: variáveis nativas do CSS As variáveis CSS centralizam valores reutilizados — cores, espaçamentos — num único sítio, facilitando manutenção e temas. A grande diferença face às variáveis de Sass é que estas funcionam em tempo de execução: podem mudar com JavaScript ou dentro de uma media query, o que as torna perfeitas para temas claro/escuro. 🗣️ Pontos a desenvolver oralmente • Mostrar a definição em :root e o uso com var(). • Demonstrar a troca de tema mudando variáveis com uma classe ou JS. • Distinguir das variáveis Sass (compilação) face a estas (tempo de execução).

NOTAS DO PROFESSOR 📖 calc(): misturar unidades num cálculo O `calc()` resolve um problema concreto e frequente: combinar valores fixos com fluidos, como "todo o espaço menos a largura da sidebar". É a ferramenta certa quando uma percentagem pura não chega porque há um elemento de tamanho fixo a descontar. Funciona com qualquer combinação de unidades. 🗣️ Pontos a desenvolver oralmente • Ler o exemplo da coluna: 100% menos a sidebar fixa. • Avisar para os espaços obrigatórios à volta dos operadores. • Mostrar a combinação de calc com custom properties para layouts flexíveis.

NOTAS DO PROFESSOR 📖 Pseudo-elementos e pseudo-classes: estilo extra sem HTML A distinção a fixar é entre pseudo-classes (um estado, como `:hover` ou `:nth-child`) e pseudo-elementos (uma parte criada, como `::before`). O grande valor dos pseudo-elementos é adicionar decoração — ícones, setas, formas — sem poluir o HTML com elementos só para estilo. Mantêm a marcação semântica e limpa. 🗣️ Pontos a desenvolver oralmente • Clarificar a notação: dois pontos para pseudo-classe, dois pontos duplos para pseudo-elemento. • Mostrar :nth-child a estilizar elementos por posição. • Dar exemplos de ::before/::after para ícones e decoração sem HTML extra.

NOTAS DO PROFESSOR 📖 Nesting nativo: organização sem pré-processador O aninhamento, que durante anos só existia em Sass, é agora suportado nativamente no CSS. Permite agrupar regras relacionadas dentro do componente pai, aproximando o que se altera junto e melhorando a leitura. O cuidado a transmitir é não aninhar demasiado fundo, o que faz disparar a especificidade. 🗣️ Pontos a desenvolver oralmente • Mostrar o & a referir o selector pai dentro do bloco. • Avisar contra aninhamento excessivo e o seu efeito na especificidade. • Referir que isto reduz a necessidade de Sass só para nesting.

NOTAS DO PROFESSOR 📖 Porque o CSS precisa de convenções Sem disciplina, o CSS de um projecto cresce e torna-se um emaranhado impossível de manter. As metodologias existem para dar regras partilhadas pela equipa: nomes previsíveis, especificidade controlada e componentes reutilizáveis. Não há uma "certa" universal — há a que a equipa adopta e segue com consistência. 🗣️ Pontos a desenvolver oralmente • Descrever o problema do CSS que cresce sem regras (folha caótica). • Enquadrar metodologia como acordo de equipa, não dogma. • Antecipar BEM e utility-first como duas filosofias opostas válidas.

NOTAS DO PROFESSOR 📖 BEM: nomear com método O BEM dá uma convenção clara para nomear classes: o bloco é o componente, o elemento é uma parte dele, o modificador é uma variante. A vantagem prática é que cada classe é uma classe simples, mantendo a especificidade plana e evitando conflitos. Os nomes ficam longos mas auto-explicativos, o que ajuda quem lê o código depois. 🗣️ Pontos a desenvolver oralmente • Decompor o exemplo card / card__titulo / card--destaque. • Explicar como BEM mantém a especificidade baixa e previsível. • Reconhecer a crítica (nomes verbosos) e quando compensa.

NOTAS DO PROFESSOR 📖 Utility-first: compor estilo no HTML A abordagem utilitária, popularizada pelo Tailwind, inverte a lógica: em vez de nomear componentes, compõe-se o estilo com pequenas classes directamente no HTML. Ganha-se velocidade e consistência (os valores vêm de um sistema fixo), à custa de um HTML mais "carregado". É a filosofia oposta ao BEM, e ambas são defensáveis conforme o projecto e a equipa. 🗣️ Pontos a desenvolver oralmente • Ler a linha de classes do exemplo e traduzir cada utilitário. • Pesar prós (rápido, consistente) e contras (HTML verboso). • Posicionar como alternativa, não substituto absoluto, ao BEM.

NOTAS DO PROFESSOR 📖 Arquitectura: pensar em sistemas, não páginas Este slide eleva o olhar do detalhe para a estrutura: um CSS escalável organiza-se por camadas (reset, base, layout, componentes, utilitários) com uma ordem intencional. Variáveis centralizadas e especificidade consistente são o que permite o projecto crescer sem ruir. A mudança de mentalidade é deixar de pensar em páginas e começar a pensar em componentes reutilizáveis. 🗣️ Pontos a desenvolver oralmente • Explicar porque a ordem das camadas importa (a cascata). • Ligar à reutilização: um componente bem feito serve várias páginas. • Relacionar com design systems do mundo profissional.

NOTAS DO PROFESSOR 📖 Sass: superpoderes que compilam para CSS O Sass estende o CSS com funcionalidades de programação — variáveis, nesting, mixins, funções — e depois compila tudo para CSS normal que o browser entende. Convém enquadrar que, com a evolução do CSS nativo (variáveis, nesting), o Sass perdeu parte da relevância, mas continua útil em projectos grandes pelos mixins e funções como `darken()`. 🗣️ Pontos a desenvolver oralmente • Sublinhar o passo de compilação: o browser nunca vê Sass. • Mostrar funções de cor (darken/lighten) como vantagem face ao CSS puro. • Contextualizar o que já é nativo em CSS e o que ainda compensa em Sass.

NOTAS DO PROFESSOR 📖 Mixins: empacotar estilo reutilizável Os mixins são a resposta do Sass ao princípio DRY (não te repitas): empacota-se um conjunto de declarações e reutiliza-se com `@include` onde for preciso. O exemplo do centramento flex é perfeito porque é um padrão que se repete imensas vezes. Ao contrário das variáveis, um mixin pode conter regras inteiras e até receber parâmetros. 🗣️ Pontos a desenvolver oralmente • Distinguir mixin (bloco de regras) de variável (um valor). • Mostrar um mixin com parâmetros para o tornar flexível. • Ligar ao princípio DRY e à manutenção centralizada.

NOTAS DO PROFESSOR 📖 PostCSS: transformar CSS com plugins O PostCSS é uma ferramenta de processamento que aplica plugins ao CSS durante o build. O exemplo mais útil é o Autoprefixer, que adiciona automaticamente os prefixos de browser, libertando o developer de os escrever à mão. Não é um concorrente do Sass — muitas vezes correm juntos no mesmo pipeline. 🗣️ Pontos a desenvolver oralmente • Explicar o que são prefixos de browser e porque o Autoprefixer poupa trabalho. • Posicionar PostCSS como parte do build, transparente para quem escreve CSS. • Referir que Sass e PostCSS coexistem no fluxo moderno.

NOTAS DO PROFESSOR 📖 DevTools: o laboratório do CSS O inspector do browser é a ferramenta mais importante do dia-a-dia de quem escreve CSS, e muitos juniores subutilizam-no. Permite editar estilos ao vivo sem tocar nos ficheiros, ver o box model, perceber a cascata e até depurar grelhas e flex com overlays visuais. O device mode é essencial para testar responsividade sem trocar de equipamento. 🗣️ Pontos a desenvolver oralmente • Demonstrar a edição de CSS ao vivo no painel Styles. • Mostrar os overlays de grid/flex para depurar layout. • Usar o device mode para simular vários tamanhos de ecrã.