Você deve redefinir seu CSS?

Este artigo explora o debate contínuo sobre se web designers e desenvolvedores web devem ou não redefinir seu CSS, compartilhando os pensamentos e opiniões de vários profissionais da web. Esta é uma série de artigos em três partes sobre o tema redefinições de CSS. Depois de discutir a rica e interessante história das redefinições de CSS (Parte 1) e examinar as opções de redefinição de folhas de estilo de CSS (Parte 2), discutiremos agora os prós e os contras do uso de folhas de estilo de redefinição aqui na Parte 3.

Os benefícios de redefinir seu CSS

Web designer/desenvolvedor e autor de livros Morten Rand-Hendriksen é um grande fã de redefinições de CSS; ele aconselhou a todos a usá-los como base para suas folhas de estilo. “Se você não definir todos os parâmetros CSS padrão em sua folha de estilo, o navegador usará seus parâmetros padrão”, disse Rand-Hendriksen em seu blog. “E como navegadores diferentes têm parâmetros diferentes, seu site terá uma aparência diferente dependendo do navegador que você usa.” Em entrevista por e-mail, Chris Coyier–um desenvolvedor web e fundador da comunidade de web design, CSS-Tricks – expressou suporte para a redefinição de margem/preenchimento do seletor universal (discutido na Parte 1).

Ele disse que tudo o que ele “já usou foi * { margin: 0; padding: 0; }.” Defendendo o método de “reinicialização total”, Coyier descreveu duas preocupações principais que os web designers normalmente têm contra o uso do seletor universal. A primeira é que ele pode quebrar os estilos padrão do navegador da web para coisas como elementos de formulário, o que ele disse ser “falso”, a menos que você use um border:0 propriedade na regra de estilo. A outra preocupação de usar o seletor universal para redefinir seus estilos é a impacto no desempenho causado pelo uso de um seletor tão inespecífico.

Mas Coyier argumenta que, embora isso seja tecnicamente verdade, “quase todas as desacelerações que ocorrem a partir disso são tão minúsculas que garanto que ninguém jamais notará”.

Em apoio à não redefinição de CSS

O desenvolvedor da Web Florent Verschelde defendeu fortemente o não uso de redefinições de CSS e, em vez disso, sugere que os web designers deveriam confiar em folhas de estilo bem elaboradas para resolver inconsistências entre navegadores. Verschelde argumenta que “os padrões do navegador são sensatos e úteis”. Graças às regras de estilo padrão dos navegadores da web, “seu conteúdo sempre será legível (embora não seja sexy)”, de acordo com Verschelde. “Se você retirá-los, você corre o risco de ter conteúdo (digamos, conteúdo gerado pelo usuário) que acaba sem estilo, cru.” A maioria dos designers e desenvolvedores que acreditam que os padrões do navegador causam a maioria dos problemas de layout estão errados, de acordo com Verschelde.

“Com conhecimento suficiente de CSS, você perceberá que a maioria das coisas que você pensava serem inconsistências devido aos padrões do navegador são, na verdade, causadas por uma má compreensão do mecanismo padrão de margens recolhidas; hasLayout bugs no IE 6-7”, disse ele. A maioria das inconsistências reais surge nas margens e no preenchimento do body elemento, as margens e o preenchimento das listas e os tamanhos das fontes dos títulos. “Se você acha que essas poucas inconsistências justificam definir tudo como zero e depois especificar a margem exata e o preenchimento da maioria dos elementos em cada situação, use uma folha de estilo redefinida”, disse Verschelde.

Para quem procura uma solução diferente, ele ofereceu sua folha de estilo base “sem redefinição” como alternativa. Em 2008, o desenvolvedor/designer Jens Meiert escreveu: “redefinir folhas de estilo é ruim: um novato não deveria usá-las, um especialista não as usaria”. Meiert justifica sua afirmação observando que as folhas de estilo redefinidas atribuem padrões de linha de base que são substituídos posteriormente de qualquer maneira (o que torna seu CSS ineficiente e redundante). Em uma postagem de blog intitulada Sem redefinição de CSSo desenvolvedor e autor do livro Jonathan Snook disse que “está tudo bem se os vários navegadores mostrarem as coisas de maneira um pouco diferente”. Ele gosta que suas “listas tenham marcadores e elementos fortes tenham texto em negrito”. O defensor dos padrões da Web e da acessibilidade, Tommy Olsson, confessou que não é “um grande fã de redefinições de CSS” em uma entrevista por e-mail no final de 2010. Ele disse que as pessoas que usam redefinições de CSS estão “presas a uma mentalidade de design de impressão” e continuam acreditar no mito da “Perfeição de Pixel”. Ele considera as folhas de estilo de redefinição de CSS ineficientes, porque você “fornece muitas regras que sabe que serão substituídas mais tarde”.

Principais preocupações com folhas de estilo de redefinição de CSS

Russ Weakley apontou três principais preocupações ao redefinir seu CSS:

1. Cada elemento “zerado” deve então ser redefinido. Isso pode causar um aumento no tamanho do arquivo CSS.
2. As folhas de estilo de redefinição de CSS podem apresentar problemas se você remover o comportamento padrão de um elemento e depois esquecer de reestilizá-lo.
3. Algumas folhas de estilo redefinidas podem ser prejudiciais para usuários que dependem de teclados para navegação.

Em uma entrevista por e-mail em 2010, Weakley disse que ficou surpreso ao descobrir que designers e desenvolvedores usaram suas advertências como evidência de que as redefinições não deveriam ser usadas. Ele disse que as folhas de estilo de redefinição de CSS devem ser vistas como outra ferramenta que os designers podem usar, ajustar e modificar para atender às suas próprias necessidades.

Problemas com o seletor universal

O desenvolvedor da Web Dave Ward observou três problemas associado ao uso do seletor universal

.

Primeiro, mais propriedades do que apenas margens e preenchimento precisam ser redefinidas. Em segundo lugar, o “dano colateral” do uso do seletor universal “causa estragos no estilo do formulário”. Terceiro, o seletor universal “tem implicações negativas de desempenho em quase todos os cenários, seja uma redefinição de CSS ou um estilo CSS de rotina”.

Descarregando no Reset CSS de Eric Meyer Eric MeyerRedefinir CSS

–talvez atualmente a folha de estilo de redefinição de CSS mais popular–foi criticada em mais de algumas ocasiões. Parece que muitos usuários não conseguiram ler as discussões de Meyer sobre Reset CSS e simplesmente incluíram-no em seus designs sem prestar atenção ao conselho do autor de que ele deveria ser usado como “um ponto de partida, não uma caixa preta independente de não-sensibilidade. ”

Dissecando Redefinir CSS Em 2007, o desenvolvedor web Gary Turner dissecou o Reset CSS de Meyer, em parte, para argumentar contra as folhas de estilo de redefinição de CSS em geral (leia sua postagem no fórum intituladaReinicializações globais consideradas prejudiciais

). Ele observou que Redefinir CSS inclui itens obsoletos (como

e ), bem como estilo desnecessário/redundante de elementos que já não possuem preenchimento ou margem (como e

). Turner fala bastante sobre sua oposição a todo o conceito de redefinições, mas suas opiniões não ficam totalmente sem oposição. Em uma postagem no fórum do SitePoint, o web designer Dan Schulz sugeriu que “ser capaz de eliminar as margens em elementos que não são de formulário” ajuda muito.

“É muito parecido com o modo como o Corpo de Fuzileiros Navais treina seus recrutas. Para construir um fuzileiro naval, primeiro é preciso destruir o adolescente”, disse ele.

O uso de :focus em redefinir CSS

:focus {outline: 0}

Em uma apresentação de slides, Weakley citou o seguinte código como prejudicial aos usuários de teclado:

:foco em Redefinir CSS :focus Em uma entrevista por e-mail, Meyer discutiu o :focus polêmica e disse que não previu que as pessoas simplesmente usariam Reset CSS sem primeiro entender como funcionava. Em relação ao

regra de estilo, ele disse: “Honestamente, eu coloquei isso aí para que as pessoas definissem uma. Claramente, o que eu deveria ter feito era delinear 3px em vermelho sólido ou algo parecido. “Do ponto de vista da acessibilidade, o erro foi mencionar isso, infelizmente. :focus Mas, por outro lado, você não pode realmente dizer: ‘Talvez se não mencionarmos isso, ninguém notará isso’. Eles sempre percebem isso”, disse Meyer. Meyer prometeu uma atualização para Redefinir CSS que provavelmente eliminará a regra e a substituirá por um comentário lembrando seus usuários de definirem um código visível :focus regra de estilo. A importância de garantir que o seletor de pseudoclasse tem uma propriedade visual tal que um site chamado Outlinenone.com outline tem a única missão de alertar contra a definição do none Propriedade CSS para 0 ou

para links. Para saber mais sobre esse assunto, Patrick Lauke tem umtutorial sobre como estilizar a pseudoclasse :focus

.

As vozes da moderação Naturalmente, há um meio-termo em tudo isso. Em novembro de 2009, o autor e designer Jason Cranford Teague examinado

os problemas giravam em torno da redefinição do CSS e ficaram firmemente no centro.

Ele sugere que o uso de redefinições deve ser determinado pelas necessidades do projeto de web design. Ele observou os mesmos prós e contras que outros discutiram sobre o uso de redefinições e concluiu que você deveria manter a sua o mais simples possível. “Mantenha-o simples, comprimido e no topo”, aconselhou Teague. O próprio Meyer é bastanteimparcial sobre o uso de redefinições

. Em abril de 2008, ele escreveu: “São um ponto de partida. Se mil pessoas os pegassem e criassem mil folhas de estilo personalizadas diferentes, isso estaria certo.

Mas também não há nada de errado em pegá-los e escrever suas próprias substituições. Se isso funcionar para você, então incrível. Para outros, os estilos de redefinição são mais um impedimento.

Isso é de se esperar; todos nós trabalhamos de maneiras diferentes.” Eric Meyer diz que a chave é “avaliar várias ferramentas pensando em como elas se relacionam com a maneira como você faz o que faz – e então escolher quais ferramentas usar, como e quando. Essa é a marca de alguém que pensa seriamente sobre o seu ofício e se esforça para fazê-lo melhor.”

Agradecimentos

Obrigado às pessoas que contribuíram para esta série de três partes sobre redefinições de CSS.

Recursos e ferramentas de redefinição de CSS

Conteúdo relacionado