Criando um site decente com o mínimo de CSS (2023)

 (thecascade.dev)
6 pontos por GN⁺ 2025-10-07 | 1 comentários | Compartilhar no WhatsApp
  • Muitos desenvolvedores passam por problemas desnecessários por causa do excesso no design de CSS
  • Só com alguns estilos globais mínimos já dá para criar páginas limpas e responsivas
  • Limitar o tamanho e definir a exibição em bloco de elementos imagem, SVG e vídeo pode resolver problemas básicos de layout
  • Usar a fonte system-ui, um espaçamento entre linhas adequado e limitar a largura máxima dos parágrafos melhora a legibilidade
  • É necessário aplicar a propriedade color-scheme para refletir preferências do ambiente, como o modo escuro do sistema operacional

Criando um site decente com o mínimo de CSS

O problema do CSS em excesso e a abordagem proposta

  • Muita gente, ao criar um site, torna o design de CSS excessivamente complexo
  • Mesmo com o mínimo de CSS, já é possível criar uma página responsiva, suficientemente elegante e fiel ao básico

HTML básico e tratamento de imagens

  • Mesmo escrevendo apenas HTML básico, o site já oferece uma responsividade básica

  • Como imagens podem causar problemas de overflow no layout, aplique o CSS abaixo

    img {
  max-width: 100%;
  display: block;
}

  • Se o mesmo tipo de problema ocorrer com elementos SVG e video, é possível ampliar a regra assim

    img,
svg,
video {
  max-width: 100%;
  display: block;
}

Melhorando a tipografia

  • A fonte padrão do navegador pode parecer sem graça do ponto de vista de design

  • Ao usar system-ui como família tipográfica, é possível aplicar a fonte padrão adequada a cada plataforma

  • Como o tamanho de fonte e o espaçamento entre linhas padrão tendem a ser um pouco pequenos, recomenda-se ajustar assim

    body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}

  • Só essa configuração já traz uma grande melhora em relação aos valores padrão do navegador

Suporte a modo escuro

  • Como muitos usuários preferem o modo escuro, é útil aplicar a propriedade color-scheme para seguir a configuração do sistema operacional

    html {
  color-scheme: light dark;
}

  • Essa propriedade faz com que os estilos do user agent reflitam automaticamente o tema preferido do sistema

  • Também é possível defini-la como atributo na tag HTML

    <html lang="en" color-scheme="light dark"></html>

  • Além da preferência do sistema, também é uma boa prática permitir que o usuário escolha diretamente o esquema de cores

Limitação da largura do conteúdo

  • O comprimento dos parágrafos de conteúdo é um fator importante que afeta bastante a legibilidade

  • Em geral, o ideal é configurar o texto principal para aparecer com 45 a 90 caracteres por linha

  • Como abaixo, é possível melhorar a legibilidade dos parágrafos limitando a largura máxima do elemento main

    main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}

  • A função min() escolhe o menor valor entre 70ch e 100% - 4rem

  • Com margin-inline: auto, o conteúdo fica centralizado horizontalmente

  • Se necessário, em vez de main, também é possível usar classes como .container ou .wrapper

Exemplo final de CSS mínimo

  • Reunindo os pontos acima, é possível montar um site estável com o seguinte conjunto mínimo de CSS

    html {
  color-scheme: light dark;
}

body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}

Encerramento e possibilidade de expansão

  • O exemplo acima pode ser usado imediatamente como ponto de partida leve ou em páginas pequenas
  • Na maioria dos casos, o ideal é expandi-lo adicionando estilos extras sobre essa base

Leituras relacionadas

1 comentários

 
GN⁺ 2025-10-07
Comentários no Hacker News
  • É um artigo antigo, mas resume por que a família de fontes system ui ainda não é recomendada em algumas regiões
    https://infinnie.github.io/blog/2017/systemui.html
    • O conteúdo do texto foi interessante, mas a ligatura st da fonte é tão feia que não quero receber conselhos de fonte desse site
  • Sinceramente, não entendo muito bem. Eu entendo a ideia de querer fazer uma página web minimalista e fácil de ler. Mas os métodos necessários para isso já não são bem conhecidos? Fico me perguntando quem é o público-alvo que sofre com isso. Também não entendo por que esse conteúdo ficou popular no HN
    • Eu. Sou principalmente desenvolvedor de backend e às vezes faço frontend em projetos paralelos, mas quase não sei CSS. Para mim, esses métodos não são "bem conhecidos". Sofro com isso toda vez justamente por não saber CSS
    • Pessoas que sofrem com um simples max-width? O público-alvo é todo mundo que faz uma homepage pessoal
font-family: System UI;

Isso está errado. A sintaxe correta é

font-family: system-ui;

O autor do texto escreveu corretamente em alguns exemplos, mas errou no primeiro exemplo, o que pode causar confusão

  • Fico curioso se nomes de fontes com duas palavras precisam ser colocados entre aspas duplas. Por exemplo,
font-family: Times New Roman;

desse jeito. Como tanto times quanto Times New Roman funcionam bem sem aspas, fico na dúvida se isso é uma exceção por ser uma fonte antiga ou se o CSS é permissivo na correspondência dos nomes

  • https://meyerweb.com/eric/tools/css/reset/
    Isso aí eu só quero chamar de dinheiro em cache
    • Eric Meyer é uma lenda no mundo do CSS. Em 2002, quando eu não entendia o box model, foi a explicação dele que me fez entender
      https://meyerweb.com/eric/books/
    • Já vi isso com frequência, mas há uma sensação estranha que simplesmente não encaixa bem aos meus olhos. Não é simples o suficiente, nem moderno/minimalista o bastante. A própria tipografia também não parece muito legível. Pode ser só gosto pessoal meu
    • Uma folha de estilo de CSS reset é o ponto de partida da poluição de estilos. A abordagem do Kevin Powell, de respeitar os estilos padrão do navegador, é melhor. Testes cross-browser continuam sendo necessários, mas por quase 20 anos o CSS reset veio como padrão, com frameworks empilhados em cima, e isso só aumentou a complexidade. Agora já dá para sair desses métodos antigos e abordar as coisas de forma muito mais criativa com CSS Grid moderno, variáveis etc. Antes eu odiava CSS por causa de tantas gambiarras, mas hoje ele parece montar um Lego que se encaixa perfeitamente. CSS reset, hoje em dia, não é algo indispensável, e sim uma ferramenta auxiliar para largar o medo. CSS pre-processor também quase não é mais necessário
  • É uma pergunta pedindo recomendação de SSG (static site generator) para um site acadêmico minimalista e simples. Astro e Hugo eram opções, mas Astro pareceu complexo demais, e escrever html/css direto traz desconforto com layout e customização. Os temas de Astro também não servem muito para blog pessoal e, na maioria, são corporativos ou chamativos. Ao lidar com essas dúvidas, a pessoa se surpreende de novo com como o design de sites ficou tão difícil. Com frameworks, componentes e inúmeras dependências, dá vontade de perguntar como os desenvolvedores web conseguem acompanhar esse ritmo
    • Recomendo Eleventy(https://11ty.dev/) ou Zola(https://getzola.org/). Ambos são ferramentas relativamente recentes e têm muitos usuários competentes
    • É a complexidade natural dos sistemas web. A simplicidade não consegue se manter. Ainda assim, sou grato pelos padrões abertos e frameworks de uso livre. Só existem opções demais, a ponto de causar paralisia de escolha
    • Esse tipo de discussão por si só encobre a vergonha do estado da web moderna. Tirando grandes serviços web como o Facebook, quase não há nada de valor, e isso é vergonhoso
    • Talvez você nem precise de mais opções, mas o franklin.jl foi ideal para mim em matemática, tratamento inline de código e limpeza visual
  • Este próprio site usa muito mais CSS do que o texto propõe, mais de 300 linhas aproximadamente. Mesmo assim, serve como uma boa base inicial
    • Obrigado por verificar esse fato no celular. Isso reduz minha confiança nesse veículo. Pretendo conferir eu mesmo depois. Ainda assim, espero que pelo menos tenham aplicado bem as técnicas apresentadas
  • Ao ver a proposta "vamos limitar a largura do conteúdo para melhorar a legibilidade", preferia que isso não fosse feito. Independentemente do que digam as pesquisas de usabilidade, eu gosto de larguras amplas. Dá para controlar a largura do conteúdo só redimensionando o navegador
    • Se você redimensiona o navegador, a janela inteira diminui, então o incômodo só aumenta. Por exemplo, para mover para o centro um texto de 80 colunas colado à esquerda, você precisa ficar mudando o tamanho da janela o tempo todo, o que é extremamente inconveniente. É tão desconfortável que às vezes chego a sobrescrever a folha de estilos do site. Às vezes acho que seria melhor só ver o texto puro. Ou então mudo para o reader mode para ler
    • Quase todo mundo que eu conheço, seja de tecnologia ou não, vive com um monte de abas abertas. A chance de cada aba ser composta de apenas uma linha de texto é 0%. Dá quase a sensação de que seria melhor imprimir e ler numa impressora matricial do que ajustar o tamanho da janela toda hora. Estou exagerando um pouco
    • Para conteúdo em prosa, larguras limitadas tendem a ser preferíveis. Em telas largas, é cansativo mover os olhos até o fim da linha para ler
    • O fato de este comentário ter sido o mais votado mostra que não é preciso levar tão a sério os conselhos do HN
    • Limitar a largura do conteúdo em si é OK. Mas tenho reclamações sobre o abuso de content-width, fonte grande e line-height alto. Muitos sites hoje usam fontes grandes demais e espaçamento entre linhas amplo demais, o que aumenta muito a rolagem. O tamanho de fonte padrão do navegador já se encaixa bem ao sistema, então é melhor manter esse tamanho e deixar o zoom cuidar do resto
  • Nem preciso ler o artigo para saber a resposta. A resposta certa é "0"
    • Os estilos padrão, principalmente no tratamento de imagens, são muito desconfortáveis no celular. Como o texto diz, se você quer algo "bem apresentável", não acho que seja tão fácil conseguir isso só com os padrões
    • O padrão do navegador é serif
  • Ainda é necessário um certo alinhamento básico com CSS reset. Se o alvo forem apenas navegadores dos últimos 5 anos, já basta usar um reset popular, enxuto e bem polido
    • O ponto principal não é uniformizar o estilo, e sim ter uma base fácil de ler. Mesmo que a aparência varie entre plataformas/navegadores, basta que continue legível. É mais prático focar na usabilidade básica do que na perfeição estética
    • Reset é superestimado. Em algo minimalista, como um blog pessoal, pequenas diferenças de estilo entre plataformas não são um grande problema. Isso vem do impulso quase obsessivo de um instinto de designer de querer alinhar tudo

img { max-width: 100%; }
Essa configuração precisa ser usada junto com height: auto. Caso contrário, a proporção da imagem quebra
img, svg, video { max-width: 100%; }
No Chrome 141, por causa de um problema de width/height em elementos SVG aninhados, o cálculo de auto sai errado. Como solução temporária, é preciso tratar com
svg:where(:not(svg svg))
A fonte system-ui não é apenas um substituto simples para sans-serif. Se você usar fonte de UI do sistema no corpo do conteúdo, em algumas combinações de sistema operacional/idioma isso pode ficar quase ilegível de tão desconfortável. Se você precisa de sans-serif, o certo é usar sans-serif
O tamanho de fonte padrão é um pouco pequeno, então algo em torno de 18~20px (1.25rem) parece adequado. Mas em telas pequenas, é melhor não passar de 1rem
Recomenda-se line-height padrão de 1.5~1.7, mas 1.7 é amplo demais em telas pequenas. Algo entre 1.4~1.5 é adequado, e pode ser ajustado de 1.4~1.6 conforme o tamanho da tela
font-family: System UI;
Isso é um erro de sintaxe evidente. Basta revisar a stylesheet para perceber rapidamente
Separar o tema escuro/claro do sistema e o tema da web é uma boa ideia. O Firefox, por padrão, já faz o conteúdo seguir o tema do sistema, e isso também pode ser ajustado separadamente
main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }
Isso significa uma margem mínima de cerca de 2rem (somando a margin padrão do body, vira 2rem+8px). Há espaço demais, e o local onde isso é aplicado também fica estranho. Se for aplicar no main, faz mais sentido usar padding, assim

main {
  max-width: 70ch;
  padding-inline: 2rem;
  margin-inline: auto;
}

Mas, na prática, header e footer também precisam do mesmo espaço lateral, então faz mais sentido ajustar a margem do body

body {
  margin: 1rem;
}

main {
  max-width: 70ch;
  margin-inline: auto;
}

Assim, dá para reduzir o espaço lateral de ~40px para algo na faixa de 16px

  • Na prática, a maior parte dos ajustes de layout e refinamentos finos pode ser resolvida com media queries. Nesse caso, no fim das contas, o código nem aumenta tanto quando comparado a um CSS comum bem escrito