Vamos ver a redefinição do CSS de Paul Allen – David Bushell – Web Dev (Reino Unido)
Sexta -feira 12 Set
2025
Os “redefinições” do CSS são o código de caldeira projetado para remover ou normalizar os padrões do navegador. Eles fornecem base sólida para construir CSS sob medida. Quando utilizados corretamente, eles devem ser discretos. Quaisquer peculiaridades de gosto e talento pessoais.
Essas peculiaridades são por que os programadores CSS obcecam em suas folhas de estilo de redefinição, como a infame cena do cartão de visita (YouTube)†.
† ⚠️ Além das citações satíricas, American Psycho é um filme brutal com extrema violência. Atenção Atenção antes de assistir, não há mais paralelos ao conforto do desenvolvimento da web!
Hits recentes
As redefinições de CSS amadureceram junto com as especificações CSS. Eles ficaram complicados. Alguns incorporam opções que podem ter grandes consequências se não forem usadas com cuidado. Talvez um bom motivo para rolar seu próprio CSS redefinido; Você deve entender cada linha.
Aqui estão alguns exemplos recentes notáveis para aprender com:
E economizar o melhor para o último:
Meu CSS é redefinido
Não vou copiar e colar tudo, porque minha redefinição CSS é um “padrão de vida”, como a especificação HTML.
Você pode encontrar 👉 meu CSS Redefinir aqui 👈
Minhas peculiaridades
Você terá notado que eu envolvei todos os seletores em :where() Para zerar a especificidade, apenas por precaução.
Normalmente, importarei meu CSS redefinido para a menor camada de cascata.
@layer base, components, utility;
@import "fonts.css" layer(base);
@import "reset.css" layer(base);Se você não andar de bicicleta esses nomes de camadas nos comentários, ficarei desapontado.
Defino minhas camadas ao lado das importações de nível superior, em vez de embrulhar grandes blocos de código. A única coisa que é importada anteriormente são @font-face declarações. Outro “apenas por precaução”. Isso permite que o navegador busque fontes mais rapidamente? Não faço ideia lol (pergunte a Harry). Eu pré -carregarei fontes críticas no anyway.
<link crossorigin rel="preload" as="font" type="font/woff2" href="Webdings.woff2"/>Eu apenas gosto de colocar fontes no topo no CSS; Eles são especiais.
Esta combinação de :where As camadas de seletor e cascata tornam a especificidade um problema.
Estou nas propriedades lógicas em todos os lugares do trem há anos. Essa prática permite suporte quase gratuito à direita para a esquerda. Para nuances, consulte RTL Styling 101 por Uma conta desaboto.
Você está perdendo esse estilo RTL gratuito se você esquecer o translated-rtl aula.
:where(html.translated-rtl) {
direction: rtl;
}O translated-rtl A classe é adicionada pelo Google Translate. Google não altera o dir atributo para que não gire naturalmente sem ajuda. Kagi tradutor adiciona dir="rtl" – Uma das mil razões para parar de usar o Google. Eu prefixo o nu html Nome da tag para clareza. Isso importa? Não!
Minhas propriedades são ordenadas em ordem alfabética porque trabalhei com Stu Robson. Minha ordenha estética razoavelmente aleatória não vibrou com o sistema de design sensível da Stu. Eu sou um convertido alfabético desde então. Como um garoto de quase 40 anos que ainda canta o alfabeto para colocar cartas, isso não é fácil para mim.
Siri, exclua esse último parágrafo.
:where(body) {
min-block-size: 100svb;
min-inline-size: 300px;
}Ok, o que é tudo isso? Certa vez, tive um cliente que redimensionei o navegador abaixo de 300px e reclamou. O min-block-size é mais interessante. Isso permite uma viewport completa “Hero”, dependendo de como você faz isso. Ele também permite empurrar o rodapé para o fundo em páginas mais curtas. Nada mais estranho do que ver um rodapé flutuante no meio.
Por que 100svb? A altura da viewport no iOS Safari é dinâmica (talvez os navegadores do Android também, eu esqueço). Qualquer coisa dimensionada para isso causa o layout cheio de rolagem no rolo. Este perfil da BBC em Armand Duplantis usando min-height: 100vh é um bom exemplo dessa questão. O tamanho inicial antes da rolagem é geralmente o menor. Isso se encaixa no meu caso de uso.
Na verdade, não redefino coisas como a margem de cabeçalho padrão. Eu sempre estilizo isso mais tarde. Quando :heading chega, posso acrescentar:
:where(:heading) {
margin: 0;
}Apenas por respeito pela gloriosa nova pseudo-classe.
Eu acrescento text-wrap: pretty para os parágrafos e faz algo no Safari. Eu não balance títulos como alguns redefinitadores fazem por padrão. Acho isso muito opinativo. Somente padrões de design específicos se adequam aos títulos equilibrados.
Meus erros
Eu amo um pouco de pontuação pendurada, então eu a gente.
:where(html) {
hanging-punctuation: first allow-end last;
}Então eu aprendi com Jeremy Keith (como se faz) essa prática tem efeitos colaterais indesejados. Então eu o reinicio de volta para none em elementos de formulário. Uma redefinição dentro de uma redefinição, esse código é cheiro? Posso ou não ter corrigido secretamente meia dúzia de sites de clientes.
Falando em tipografia de calças sofisticadas, mostre apoio à interop 2026 de Richard Rutter. Priorize os bugs de longa data primeiro Grande navegador 🙏
Durante muito tempo, me recusei a usar “suavização de fontes”.
:where(html) {
-webkit-font-smoothing: antialiased;
}Eu estava firmemente uma pessoa “Por favor, não mexa com a renderização de texto”. Isso foi até eu mergulhar profundamente: qual é o problema com a suavização da fonte do webkit? – Não estou feliz com esse post, é confuso, mas o argumento é que agora adiciono o estilo à minha redefinição.
Seu CSS é redefinido?
Então esse é o meu CSS redefinindo. Ele mudou e mudará com o tempo.
Vamos ver o seu! Você o mantém magro ou prefere uma redefinição chonky?
PS, eu apenas um grande blog duas vezes em um dia? Isso é permitido?
