Prévia Markdown
Guia de Referência: CSS para IA — Referência MDN
Visualização renderizada do arquivo tecnologias/css-mdn.md. O conteúdo abaixo é o mesmo arquivo destinado a orientar a IA.
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/
!importantcontinuamente.
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-boxcomo 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
<img>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
- A tecnologia escolhida resolve um requisito real e foi aplicada no ambiente correto.
- Semântica, acessibilidade e estados de teclado/foco foram revisados.
- Entradas externas são tratadas como não confiáveis e saídas são renderizadas com segurança.
- Erros, estados vazios, carregamento, offline/rede e cancelamento foram considerados quando aplicável.
- Compatibilidade e fallback foram avaliados para recursos não Baseline/amplamente suportados.
- O código não duplica APIs nativas ou responsabilidades de outra camada.
- Performance foi medida quando a decisão tem impacto relevante.
Prompt-base para IA
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
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