Documentação: Reset CSS Moderno e Tipografia Fluida

Este documento explica a estrutura e o propósito do snippet de reset CSS e tipografia fluida. Ele foi projetado para fornecer uma base sólida e acessível para o desenvolvimento front-end, garantindo consistência visual e adaptabilidade em diferentes dispositivos e preferências do usuário.


Visão Geral

O objetivo deste reset é eliminar inconsistências padrão dos navegadores e estabelecer uma base previsível para o estilo de novos projetos. Ele incorpora:


Seções do Código

1. @charset 'UTF-8';

2. Variáveis CSS Globais (:root)

Define variáveis CSS (custom properties) para valores que serão reutilizados em todo o projeto.

3. Preferência de Movimento Reduzido (@media (prefers-reduced-motion: reduce))

4. Reset Básico Universal

5. Configuração html e body

6. Estilos Globais do body

7. Mídia Responsiva

8. Elementos de Formulário

9. Estados de Foco Acessíveis

10. Tipografia

12. Listas (ul, ol)

13. Tabelas (table)

14. Código (code, pre)

15. Utilitários de Acessibilidade (.sr-only)


Como Usar

Para usar este reset em seu projeto:

  1. Copie o conteúdo do snippet JSON fornecido.
  2. Abra o VS Code.
  3. Vá em File > Preferences > Configure User Snippets.
  4. Selecione css.json (ou crie um novo para seu projeto em .vscode/seu-nome.code-snippets).
  5. Cole o snippet dentro das chaves {} existentes (se houver outros snippets, separe-os com vírgulas).
  6. Salve o arquivo.
  7. Em qualquer arquivo .css no VS Code, digite resetcss-fluid e pressione Enter ou Tab para inserir o código.

@charset "UTF-8";

:root { / Escala de Tipografia Fluida / --fs-xs: clamp(0.75rem, 0.5vw + 0.75rem, 1rem); --fs-sm: clamp(0.875rem, 0.75vw + 0.875rem, 1.125rem); --fs-md: clamp(1rem, 1vw + 1rem, 1.25rem); / Tamanho base (16px, 20px) / --fs-lg: clamp(1.125rem, 1.5vw + 1.125rem, 1.5rem); --fs-xl: clamp(1.25rem, 2vw + 1.25rem, 1.75rem); --fs-2xl: clamp(1.5rem, 2.5vw + 1.5rem, 2rem); --fs-3xl: clamp(1.875rem, 3vw + 1.875rem, 2.5rem); --fs-4xl: clamp(2.25rem, 4vw + 2.25rem, 3rem); --fs-5xl: clamp(2.5rem, 5vw + 2.5rem, 3.5rem);

/ Line Heights / --lh-tight: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.75;

/ Cores Base / --color-text: #1a1a1a; --color-text-muted: #6b7280; --color-focus: #3b82f6; }

/ Preferência de movimento reduzido / @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }

, ::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

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

html { scroll-behavior: smooth; / Prevent iOS text size adjust after orientation change / -webkit-text-size-adjust: 100%; }

html, body { width: 100%; height: 100%; }

body { line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: var(--fs-md); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--color-text); }

/ Mídia responsiva / img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; object-fit: cover; }

svg { fill: currentColor; }

/ Form elements / input, button, textarea, select { font: inherit; border: none; background: transparent; }

button, input[type='submit'], input[type='button'] { cursor: pointer; }

button:disabled, input:disabled { cursor: not-allowed; opacity: 0.6; }

/ Estados de foco acessíveis / :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

button:focus:not(:focus-visible) { outline: none; }

/ Typography / p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; }

h1, h2, h3, h4, h5, h6 { line-height: var(--lh-tight); font-weight: 600; }

h1 { font-size: var(--fs-4xl); } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-2xl); } h4 { font-size: var(--fs-xl); } h5 { font-size: var(--fs-lg); } h6 { font-size: var(--fs-md); }

/ Links / a { color: var(--color-focus); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

a:hover { text-decoration-thickness: 2px; }

/ Listas / ul, ol { list-style-position: inside; }

/ Tabelas / table { border-collapse: collapse; border-spacing: 0; width: 100%; }

/ Código / code, pre { font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace; font-size: 0.9em; }

pre { overflow-x: auto; white-space: pre; }

/ Utilitários de acessibilidade / .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/ Remove animações para usuários que preferem movimento reduzido / @media (prefers-reduced-motion: reduce) { , ::before, *::after { animation-delay: -1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; background-attachment: initial !important; scroll-behavior: auto !important; transition-duration: 0s !important; transition-delay: 0s !important; } }