O Reboot.css do Bootstrap 4

O Reboot.css, introduzido no Bootstrap 4, substituiu o Normalize.css. Sua função nada mais é do que "resetar", isto é, normalizar as propriedades CSS padrão dos navegadores (browsers), de forma que a aparência dos elementos das páginas fique o mais semelhante possível em todos eles.

Podemos dizer, que o Reboot.css é uma versão melhorada do Normalize.css, que era usado anteriormente. Neste artigo, veremos suas principais funcionalidades em detalhe.

No princípio, tudo eram trevas

Acompanhei todo o desenvolvimento da Internet, pois a informática tem sido meu principal campo de interesse desde meados da década de 1980.

A vida de um desenvolvedor frontend não era nada fácil nos primeiros tempos dessa especialidade, que praticamente teve início com a separação da estrutura do código das páginas (HTML) de sua formatação (CSS) em meados da década de 1990.

O grande problema, que ainda persiste em menor escala até os dias de hoje, sempre foi a falta de padronização e a guerra não declarada entre os principais navegadores (browsers).

A forma de contornar as diferenças que essa falta de padronização acarretava no design da página é uma coisa bem conhecida de nós brasileiros: a gambiarra velha de guerra...

A mais elementar delas, consistia em zerar (reset) o estilo-padrão eventualmente atribuído pelos navegadores. Essa prática era denominada também de normalização e a primeira foi introduzida por Eric A. Meyer, considerado por muitos o padrinho do CSS.

A normalização de Meyer era radical: zerava tudo. Os cabeçalhos "h1" a "h6", por exemplo, ficavam todos com o mesmo tamanho. Margens internas e externas, tabelas, tudo zerado.

Evidentemente, isso implicava num enorme trabalho preliminar para criar uma stylesheet básica padronizada. Vem daí a aversão que muitos criaram em relação ao frontend, pois ele era sinônimo de muito trabalho braçal.

Depois daquele primeiro normalizador de Eric Meyer, muitos outros resets surgiram, acabando por se firmar como um dos mais usados, o Normalize.css. Sua grande vantagem e principal fator para sua popularização foi que, além de resetar os padrões dos navegadores, ele fornecia uma stylesheet básica prontinha para uso. Isso simplificava muito o desenvolvimento.

O Reboot.css, como disse, é uma evolução do Normalize.css e analisaremos a seguir suas principais vantagens.

Para que você possa visualizar essa evolução, apresento-lhe abaixo uma demonstração no Codepen que permite comparar a visualização dos elementos HTML com o estilo-padrão do navegador, aplicando o reset de Eric Meyer, aplicando o Normalize.css e aplicando o Reboot.css. Basta selecionar o método desejado clicando no botão do topo da página.

Veja este pen:

O estranho tamanho da caixa

Praticamente todos os elementos HTML são uma caixa bidimensional. Possuem largura (width), altura (height), borda (border), além de margens externas (margin) e internas (padding).

O grande problema é que o box model, isto é, o modelo dessa caixa, segue tradicionalmente uma regra muito confusa: a largura (width) e altura (height) da caixa não consideram as margens internas e externas (margin e padding). Vejam visualmente o que isso quer dizer:

        
            border-width: 10px;
            width: 50%;
        
    

        
            width: 50%;
         
    

Perceberam o drama? Essa definição esdrúxula foi a causadora do surgimento de inúmeras gambiarras para recalcular o posicionamento de elementos compensando a influência das bordas e margens.

Em idos tempos, o pessoal da Microsoft já tinha percebido essa esquisitice e o famigerado IE6 trocou o box model, para que correspondesse à largura total, incluindo margens e bordas.

Para resolver de vez isso, o CSS3 criou a propriedade box-sizing, permitindo trocar o box model que queremos usar. O modelo que inclui bordas e margens à largura total da caixa é o border-box. Vejam como fica a caixa apresentada acima nesse novo modelo:

        
            border-width: 10px;
            width: 50%;
        
    

        
            width: 50%;
         
    

Bingo!!! A primeira vantagem do Reboot.css sobre o Normalize.css é exatamente esta: o Reboot adota box-sizing: border-box como padrão.

Emes e Remes

Uma outra vantagem do Reboot.css é a adoção da unidade REM, introduzida no CSS3, como padrão.

Abaixo, um breve comparativo das três unidades existentes:

• px -- Bom para consistência, péssimo para acessibilidade.
• em -- Bom para acessibilidade, razoável para manutenção/consistência.
• rem -- Bom para acessibilidade, ótimo para manutenção/consistência.

No vídeo #16 da minha série Bootstrap Total, trato da adoção das unidades REM como padrão no Bootstrap 4 e demonstro na prática como isso melhora a responsividade.

Tudo em família

O Reboot.css usa fontes nativas. Isso melhora muito a renderização das fontes em diferentes sistemas operacionais, sendo de destacar:

1. Tempo de carregamento das fontes default próximo a zero;
2. O usuário pode usar a fonte de sua preferência.

Vejam abaixo a definição usada pelo Reboot.css:

Nada acima

O Reboot.css zera a margem superior dos seguintes elementos:

• h1 a h6
• p
• ul
• ol
• dl
• pre

Faz sentido, não é mesmo?!

Conclusão

Listei apenas as principais vantagens em usar o Reboot.css no lugar do Normalize.css, embora este também seja um excelente reset para o CSS.

Uma última observação: como o CSS do Bootstrap 4 foi inteiramente desenvolvido usando SASS, é possível usar apenas o Reboot.css como normalizador, mesmo em projetos não baseados neste fantástico framework.