ℹ
Um importante lembrete é que as regras (geralmente contidas dentro do mesmo arquivo) para resetar seu CSS devem ser a primeira folha de estilos a ser carregada pela sua página web; caso contrário, as coisas podem ficar confusas e existir conflitos na estilização dos seus elementos HTML.
### Desvantagens
Apesar dessa seção compartilhar os casos mais comuns - e os benefícios - para resetar seu `CSS`, todos nós sabemos que toda escolha possui consequências, e nem todas são boas. Como dizia o *Tio Ben*: “com grandes poderes, vem grandes responsabilidades”, e é por isso que eu gostaria de deixar você ciente sobre alguns “riscos” que a utilização dessa técnica pode trazer:
* Provavelmente, todos (ou quase) estilos padrão que vemos nos *browsers* são úteis e, mesmo que nem sempre sejam “bonitos”, eles irão garantir que nosso conteúdo seja acessível e legível. Ao removermos esses estilos, corremos o risco de que algum conteúdo que esquecemos de customizar fique “quebrado” ou sem estilo.
* Tecnicamente, aumentamos o consumo e diminuímos a performance de nossa página *web*, pois ao abrí-la, o *browser* terá que aplicar esses estilos imediatamente - e, geralmente, por primeiro -, para só então renderizar os demais estilos (tendo que adaptá-los ao nosso *Reset*). *Disclaimer: muito provavelmente esse ofensor de performance seja imperceptível.*
* Alguns estilos redefinidos podem ser prejudiciais para usuários que dependem de teclados para navegação.
[Leia mais detalhes, opiniões e referências na série incrível que o William Craig escreveu.](https://www.webfx.com/blog/web-design/should-you-reset-your-css/)
## Exemplos práticos
### Teste rápido
Um dos primeiros estilos que são resetados quando adotamos a técnica de Reset CSS usando alguns dos modelos que eu mencionei previamente é o `box-sizing`. Para entendermos melhor porquê isso é feito, vamos fazer um pequeno e rápido teste.
Digamos que você não tenha **nenhum outro estilo** em sua página web além do *snippet* abaixo. Agora quero que analise esses valores e responda: *“qual será a largura final dessa* `div`*?“.*
```css
div {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
```
Você ficaria surpreso se eu disesse que a resposta **correta** é `142px`? 🤯
### Explicação
Isso soa tão estranho porque, se eu tivesse que palpitar, diria que +90% das páginas *web* utilizam o atributo `border-box`; contudo, por [padrão](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#content-box), o valor de `box-sizing` da *web* é o `content-box`. Em resumo, essa propriedade prioriza o conteúdo e, portanto, irá garantir que **o conteúdo tenha os** `100px` que definimos. Dessa forma, o `padding: 20px` (que será aplicado em todos os lados da `div`) irá ser adicionado como *extra* ao elemento. O mesmo vale para as bordas, que incrementarão `1px` em cada lado da `div`. Portanto, o valor final de `142px` vem desse cálculo:
* `100px` (do conteúdo) **+** `40px` (`20px` de `padding` de cada lado) **+** `2px` (`1px` de `border` de cada lado) = `142px`
Já ao usar os *Reset's* mais comuns, geralmente esse valor será redefinido para `border-box`. Isso irá alterar a forma como o `CSS` irá calcular as medidas, uma vez que o conteúdo não é mais “priorizado” e passamos a utilizar uma forma mais natural - e, na minha opinião, muito mais simples - de calcular tamanhos, já que o valor passado é “respeitado” e, dessa vez, quem tem de adaptar-se é o próprio conteúdo. Vamos aplicar os mesmos valores do exemplo anterior, mas com o padrão `border-box`:
* `100px` (do conteúdo) **\-** `40px` (`20px` de `padding` de cada lado) **\-** `2px` (`1px` de `border` de cada lado) = `100px`
Note que o resultado que estou falando acima (`100px`) refere-se ao tamanho da `div` - ou seja, ela “esticou” até preencher exatamente o valor que passamos (`width: 100px`). Como eu disse anteriormente, nesse caso, quem tem que adaptar-se é o **conteúdo** e, por isso, no cálculo acima eu usei o sinal de **subtração**, tendo em vista que o tamanho final do conteúdo precisará acomodar-se no espaço que **sobrar** depois que o `padding` e a `border` forem aplicados.
Como eu sei que esse conteúdo não é simples de ser assimilado, eu deixei o exemplo abaixo para ajudar! 😃 Nele você consegue ver com mais clareza a diferença dos modelos, a largura total da `div` e a largura do conteúdo destacada com a borda pontilhada em azul. Note, por exemplo, que a borda pontilhada em azul da primeira caixa é *exatamente* igual ao *tamanho total* da segunda caixa. Com isso, conseguimos visualizar como o primeiro modelo prioriza o conteúdo (preenchendo o tamanho total com ele, para depois adicionar os cálculos), enquanto o segundo entende que o “total” deve ser o tamanho informado (e diminui os demais valores, encaixando o conteúdo no que sobrar). Convido você a analisar esse exemplo com calma e paciência, pois tenho certeza que isso irá te ajudar!