# Guia de Referência: CSS para IA — Referência MDN Guia de CSS para orientar uma IA sobre cascata, layout, responsividade, design tokens e manutenção sem transformar a folha de estilo em uma coleção de overrides. --- ## 1. Contrato de execução para a IA - Trate este arquivo como **referência de decisão e implementação**, não como licença para aplicar toda tecnologia disponível. - Antes de codificar, declare o **ambiente** (browser, Node.js, worker, servidor, PWA etc.), os requisitos e as restrições de compatibilidade. - Prefira a solução nativa e simples quando ela atende aos requisitos com boa acessibilidade, segurança e manutenção. - Consulte compatibilidade antes de usar APIs experimentais ou de disponibilidade limitada. - Não misture responsabilidades: estrutura/semântica em HTML, apresentação em CSS, comportamento em JavaScript e capacidades do navegador em Web APIs. - Considere segurança, privacidade, performance e acessibilidade desde o design, não como correções finais. --- ## 2. Fundamentos da cascata ### Cascade e specificity - **Conceito:** Origem, importância, camadas, especificidade e ordem. - **Regra para IA:** Resolva conflitos pela arquitetura da cascata; evite elevar especificidade/`!important` continuamente. ### Inheritance - **Conceito:** Propriedades herdadas e valores globais. - **Regra para IA:** Use herança para tipografia/tokens quando faz sentido e redefina explicitamente em componentes isolados. ### Box model - **Conceito:** content/padding/border/margin e box-sizing. - **Regra para IA:** Use `border-box` como base previsível e entenda overflow. --- ## 3. Layout ### Normal flow - **Conceito:** Block/inline e fluxo normal. - **Regra para IA:** Não posicione absolutamente elementos que funcionam naturalmente no fluxo. ### Flexbox - **Conceito:** Layout unidimensional. - **Regra para IA:** Use para alinhamento/distribuição em um eixo e grupos de componentes. ### Grid - **Conceito:** Layout bidimensional. - **Regra para IA:** Use para estruturas de linhas e colunas; nomeie áreas quando melhorar legibilidade. ### Position e stacking - **Conceito:** relative/absolute/fixed/sticky, containing blocks e stacking contexts. - **Regra para IA:** Documente camadas e evite z-index arbitrário crescente. --- ## 4. Responsividade ### Media queries - **Conceito:** Adaptação por viewport/preferências. - **Regra para IA:** Use mobile-first e breakpoints derivados do conteúdo/design. ### Container queries - **Conceito:** Adaptação pelo tamanho do contêiner. - **Regra para IA:** Use para componentes reutilizáveis cujo comportamento depende do espaço local. ### Funções fluidas - **Conceito:** min(), max(), clamp(), calc(). - **Regra para IA:** Prefira escalas fluidas com limites a múltiplos breakpoints desnecessários. --- ## 5. Design system e aparência ### Custom properties - **Conceito:** Variáveis CSS e escopo. - **Regra para IA:** Use tokens semânticos para cor/spacing/radius e altere tema por escopo. ### Color - **Conceito:** Sistemas de cor, alpha e contraste. - **Regra para IA:** Escolha tokens que preservem contraste; não dependa só da cor para status. ### Typography - **Conceito:** font, line-height, wrapping e fontes. - **Regra para IA:** Otimize carregamento e legibilidade; mantenha escala consistente. ### Images - **Conceito:** object-fit, aspect-ratio e backgrounds. - **Regra para IA:** Escolha `` para conteúdo e background para decoração. --- ## 6. Interação e movimento ### Pseudo-classes - **Conceito:** hover, focus, focus-visible, checked, disabled etc. - **Regra para IA:** Implemente estados de teclado além de hover. ### Transitions/animations - **Conceito:** Movimento e transições. - **Regra para IA:** Respeite prefers-reduced-motion e evite animar layout caro quando transform/opacity resolve. --- ## 7. Arquitetura de CSS ### Layers e organização - **Conceito:** Separação de reset/tokens/components/utilities/overrides. - **Regra para IA:** Defina ordem estável; overrides específicos devem ser exceção localizada. ### Nomenclatura - **Conceito:** Classes de componente e estados. - **Regra para IA:** Escolha convenção consistente; não acople CSS a estruturas DOM frágeis. --- ## Checklist de aceite 1. [ ] A tecnologia escolhida resolve um requisito real e foi aplicada no ambiente correto. 2. [ ] Semântica, acessibilidade e estados de teclado/foco foram revisados. 3. [ ] Entradas externas são tratadas como não confiáveis e saídas são renderizadas com segurança. 4. [ ] Erros, estados vazios, carregamento, offline/rede e cancelamento foram considerados quando aplicável. 5. [ ] Compatibilidade e fallback foram avaliados para recursos não Baseline/amplamente suportados. 6. [ ] O código não duplica APIs nativas ou responsabilidades de outra camada. 7. [ ] Performance foi medida quando a decisão tem impacto relevante. --- ## Prompt-base para IA ```text Use o guia "CSS para IA — Referência MDN" anexado como contrato técnico. Analise meu requisito e escolha somente os conceitos necessários. Diga quais partes do guia serão aplicadas e por quê. Implemente com semântica, acessibilidade, segurança e compatibilidade. Não invente APIs. Ao final, revise a solução pelo checklist do guia. Contexto: [DESCREVA o sistema, stack/versões, ambiente e estado atual] Objetivo: [DESCREVA o resultado observável esperado] Restrições: [DESCREVA o que não pode mudar e os limites técnicos] ``` ### Como preencher os campos - **Contexto:** descreva sistema, stack/versões, arquitetura ou ambiente, estado atual e onde a mudança acontece. - **Objetivo:** descreva o resultado observável esperado — o que o usuário ou o sistema deve conseguir fazer ao final. - **Restrições:** descreva o que não pode mudar e os limites de compatibilidade, segurança, acessibilidade, performance, dependências e escopo. ### Exemplo preenchido ```text Contexto: Dashboard com cards e tabela larga que precisa funcionar em desktop e celular e oferecer tema claro/escuro. Objetivo: Tornar o layout responsivo e centralizar cores, espaçamento e estados visuais em tokens reutilizáveis. Restrições: Sem !important como solução padrão; evitar z-index arbitrário; preservar impressão e foco visível. ``` --- ## Fontes primárias - MDN CSS: https://developer.mozilla.org/pt-BR/docs/Web/CSS