CSS Reset

[vitor-mendrone-deel]

Pessoal, sei que esse assunto já foi amplamente debatido em centenas de locais mas acredito que essa seja uma discussão valida pra termos por aqui.

Como vocês tem 'resetado' o CSS?

Sempre que vou iniciar um novo projeto fico com essa dúvida. Normalize, Reset.css, resetar só o que preciso, resetar tudo (o famoso: * {margin: 0; Padding: 0; box-sizing: border-box;})

[matheuslc]

Eu utilizo o normalize com box-sizing: border-box.

Como dito no post do Paul Irish, isso não vai afetar sua performance.

[diogomoretti]

mesmo que o @matheuslc, utilizo normalize.styl e também box-sizing: border-box 👌

[joaopedron]

Utilizo o Reset do Eric e também box-sizing: border-box

[eduardojmatos]

Uso quase o mesmo esquema seu @Mendrone e do @diogomoretti (normalize + box-sizing: border-box)

[heloisabiagi]

Usava o reset do Eric Meyer, mas ultimamente tenho dado preferência ao Normalize e ajustando também o box-sizing. O bom do Normalize é que ele não é um reset que deixa todos os elementos "pelados", ele normaliza uma aparência decente em todos os browsers, e isso nos faz poupar um certo tempo.

Quanto ao reset com "*"... eu sei que ele é largamente popular e utilizado, só que a renderização dele é bem mais lenta porque ele vai ser aplicado a todos os elementos do DOM sem exceção. Pra quem precisa de performance, é melhor declarar explicitamente os elementos que vc quer "zerar" (às vezes vc não quer mexer numa checkbox ou radio-button, mas o código vai passar por eles mesmo assim).

[brunopulis]

Eu utilizo o Normalize.css :)

[vitor-mendrone-deel]

A algum tempo eu encontrei esse reset, bastante simples ainda mas com alguns pontos interessantes:

body {
    margin: 0;
    font: 16px/1 sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

Que garante maior consistência no visual de fontes (principalmente entre OsX e Windows

Mas ainda tenho utilizado somente normalize + box-sizing

[eduardojmatos]

margin: 0; é uma boa também...

Não sabia do -moz-osx-font-smoothing, mas o foda é que é non-standard... já já Firefox pode remover.

[fdaciuk]

+1 pro Normalize + box-sizing e umas pequenas modificações.. essa parada do font-smoothing eu uso tbem xD

Mas isso pra projetos de médio e grande porte.. pra projetos pequenos, não dá tanta diferença, então é de boa pra usar o polêmico * { border: 0; margin: 0; padding: 0 }.

xD

[jacksonfdam]

Acho valido olhar essa thread!

[eduardojmatos]

@jacksonfdam bacana, citaram o http://cssreset.com

esse artigo http://sixrevisions.com/css/should-you-reset-your-css/ é bem longo, lerei com calma mais tarde pra avaliar heheh

[cristianounix]

Eu tb faço o mesmo do @fdaciuk
+normalize +box-sizing

[marquinhusgoncalves-zz]

Também utilizo o Normalize com box-sizing: border-box

[tcelestino]

Tem alguém que não usa nenhuma dessas opções? Que prefere resetar a partir das necessidades?

[felipecodes]

Eu prefiro o CSS Reset do Eric Meyer. Já usei o Normalize, mas não curti muito porque eu sempre tinha que resetar os elementos que ele não reseta.

[wschenkel]

Para projetos pequenos acabo usando o * { box-sizing: border-box; margin: 0; padding: 0; } mas para projetos maiores opto pelo normalize.

[elvisdetona]

Hj em dia como 99,9% dos projetos usamos algum preprocessor, acho melhor zerar na mão somente o que preciso. Sempre usei o normalize + box-sizing: border-box (assim que descobri), mas HJ, 2016, prefiro zerar só o que preciso.
Eu trabalho com muiiiiiiiiito codigo legado, então zerar só o que preciso é sempre melhor e corro menos risco de dar merda.

[eduardojmatos]

@elvisdetona então, em legados realmente é outro cenário... Também tô contigo, não arrisco aplicar nem reset nem normalize hehehe

[kazzkiq]

@Mendrone Eu geralmente re-estilizo o estado de :focus com algum outro tipo de efeito visual, esse "reset" é só pra tirar aquela borda feia dos elementos que me incomoda demais haha (TOC feelings).

@Meche Eu sempre que posso ainda uso o Normalize.css, mais por costume do que por necessidade, pra ser sincero. (acho que hoje em dia a renderização nos browsers já está mais homogênea comparado à quando eu comecei a usar)

[willianjusten]

Eu prefiro aplicar reset só no que eu preciso, assim evito de criar linhas e linhas de código desnecessárias, podendo gerar um legado grande e perigoso.

[matheuslc]

@willianjusten Tu não acha que um reset é simples de mais pra deixar um legado grande e perigoso?

[felipefialho]

@kazzkiq Cara, não fala isso =(

Ao tirar o :focus dos elementos você praticamente acaba com a acessibilidade do projeto. Navegação por teclado fica praticamente impossível.

c/c @deividmarques

[willianjusten]

@matheuslc , o reset nada mais é que um overwrite de características, e se eu precisar mudar algo, vou ter que reescrever novamente. Se eu faço uma só vez, já deixo resolvido =)

Mas isso varia muito de projeto para projeto, eu sou afixionado por performance...

[deividmarques]

@kazzkiq Em projetos web raramente pensa-se na acessibilidade e ela possui várias camadas ou fases. Antes mesmo de chegar em leitores de tela (usando wai-aria), precisa-se pensar em navegacão com o teclado e como se sabe aonde o foco está visualmente ?

*:focus {
    outline: none;
}

O código acima acaba com isso, mas claro que pode-ser fazer isso, no entanto terá um grande trabalho pra adicionar visualmente o comportamento de :focus em todos elementos de formulários, links e botões do seu projeto.

O twitter tbm zera o outline, no entanto ele mostra ao usuário o foco do teclado através do CSS em cada elemento. Faça você mesmo esse teste no twitter: Vá ao topo, primeiro navegue com o mouse e depois com o teclado utilizando a tecla TAB e entenderás melhor o que citei.
https://twitter.com

[kazzkiq]

Opa opa, calma lá pessoal. @lfeh @deividmarques eu estou ciente do problema de acessibilidade/navegação ao remover os outlines, e justamente por isso que eu afirmei na minha outra resposta que substituo o outline por algum outro tipo de efeito visual.

Geralmente substituo outline por bordas + box-shadow (seguindo a identidade visual da aplicação), mas obviamente não coloquei estes estilos substitutos lá no código porque aí ele deixaria de ser um reset. ;)

[felipefialho]

Galera.

Vou refazer a questão do @Mendrone... :)

Vocês ainda estão resetando seus elementos?

[wschenkel]

De um tempo para cá, tenho usado esse reset: http://jgthms.com/minireset.css/
Tem sido bastante útil.

[vitor-mendrone-deel]

Quase 1 ano depois posso dizer que abandonei o Normalize e tenho feito o reset de acordo com as necessidades dos projetos

O minireset citado pelo @willianschenkel é bem legal, utilizei em um projeto pessoal, mas removi o reset de tables que eu uso MUITO raramente.

[felipefialho]

Sendo muito sincero, desse tempo pra cá que o @Mendrone criou a issue estou usando um simples:

*
  box-sizing border-box
  margin 0
  padding 0 
  
  &:before
  &:after
    box-sizing border-box

Isso porque, em basicamente todos os projetos, preciso desse reset básico, mas tem casos (tipo meu site), que reseto só o box-sizing!

E complementando de acordo com a especificidade do projeto, por exemplo, no que estou trabalhando atualmente.

input[type="search"]
  appearance searchfield

  &::-webkit-search-cancel-button
    appearance searchfield-cancel-button

Tenho trabalhado mais com os resets dentro do próprio escopo do elemento.

[lcquadros]

Normalize com box sizing é muito bom.

Mas uma vez que ele "reseta" algumas declarações, o melhor que pudemos fazer com ele foi adicionar variáveis default no sass para que fosse mais um reboot do que um reset e - na época - reduzir volume de código.