As melhores folhas de estilo de redefinição de CSS

Redefinir CSS

Eric Meyer’s Reset CSS, esta é a folha de estilo que fez do CSS redefinir um pilar. Redefinir CSS anula uma propriedade CSS padrão definindo-a como 0 ou define a propriedade para um valor de senso comum (por exemplo, line-height: 1no <body>elemento).

Declarar explicitamente certos valores de propriedade CSS pode ajudar a reduzir inconsistências na forma como nossos elementos HTML são renderizados pelo navegador. Muitas folhas de estilo de redefinição de CSS sobre as quais falaremos não são atualizadas há algum tempo.

Folha de estilo de redefinição HTML5

Esta folha de estilo de redefinição de Richard Clark é uma modificação do CSS Redefinir de Eric Meyer. Esta redefinição de CSS é voltada para elementos HTML 5 modernos.

Outros ajustes encontrados no HTML5 Reset Stylesheet são a remoção de um :focusreset de pseudo-classe e o uso de seletores de atributo para direcionar os elementos <abbr>e <dfn>de uma forma que minimize o escopo de suas regras de estilo.

Miniredefinição de CSS

Esta é uma redefinição de CSS minimalista por Vladimir Carrer. Ele tem apenas quatro regras de estilo CSS.

Ele apenas redefine os elementos HTML usados com mais frequência, aqueles que você realmente usará em seus projetos de desenvolvimento web. Confira CSS Mini Reset no GitHub .

reset.css (de HTML5 Reset)

Esta folha de estilo faz parte do padrão HTML5 Reset .

Seu início foi inspirado por três projetos de código aberto: Reset CSS, HTML5 Reset Stylesheet e HTML 5 Boilerplate. Esta folha de estilo de redefinição é robusta e opinativa. Por exemplo, ele tem regras de estilo específicas para as :beforee :afterpseudo-classes e define a box-sizingpropriedade como border-box, o que suas outras opções não fazem.

Marx

Esta redefinição de CSS é uma folha de estilo padrão para pequenos projetos de desenvolvimento de sites. Para sites simples, como sites de uma página , você provavelmente não precisa usar uma grande estrutura de front-end como o Bootstrap. Nesses casos, Marx é uma opção a considerar.

Redefinições de CSS especializadas

Essas duas folhas de estilo de redefinição de CSS são específicas para o propósito:

Typeset.css

Esta é uma redefinição de CSS básica apenas para tipografia da Web. É voltado para sites e páginas da Web com muito texto, como blogs e sites de notícias. Observe que Typeset.css só funcionará em elementos HTML que são filhos de um elemento com uma classe de typeset.

Então, para implementar Typeset.css, você precisa fazer algo como:

<div class=”blog-post typeset”> <h1>Blog Post Title</h1> <p>My blog post.</p> </div>

Cleanslate

Esta folha de estilo de redefinição de CSS é extremamente agressiva. Ele foi projetado para uso em conteúdo que será distribuído em outro site, um cenário em que seu controle sobre as regras de estilo é restrito. Cleanslate usa uma !importantdeclaração em todos os valores de propriedade para forçar os navegadores a não seguirem cascata normal e regras de especificidade CSS .

Isso lhe dá uma chance de lutar quando se trata de substituir as regras de estilo do site de terceiros.

Normalização CSS: uma alternativa moderna

Os navegadores de hoje são muito bons em definir estilos padrão apropriados. Além disso, eles agora obedecem aos padrões modernos e às melhores práticas.

Os estilos padrão agora são mais previsíveis e consistentes em todos os aspectos. Assim, em vez de fazer uma redefinição geral em todos os estilos de navegador padrão, podemos focar apenas em elementos HTML específicos e propriedades CSS que não estão sendo renderizadas uniformemente em diferentes navegadores. Mantemos os outros padrões úteis do navegador.

Essa é a ideia principal por trás da normalização CSS. Em outras palavras, para nossos elementos HTML sem estilo, deixamos implicitamente que o navegador ou a folha de estilo de normalização definam as regras de estilo para nós. Dessa forma, se esquecermos ou não atribuirmos uma regra de estilo a um elemento, eles ainda serão renderizados de forma previsível e consistente nos vários navegadores.

Um benefício da normalização CSS é que ela mantém nossas folhas de estilo DRY . Não estamos redefinindo os valores de propriedade de um elemento HTML para 0, apenas para substituir as declarações de propriedade mais abaixo na cascata por outra regra de estilo. Aqui estão as duas principais folhas de estilo de normalização CSS para conferir:

Normalize.css

Esta popular folha de estilo de normalização CSS é usada em sites importantes como Twitter e GitHub, e é uma dependência em grandes projetos de código aberto como Bootstrap e HTML5 Boilerplate.

Normalize.css é o que começou tudo.

higienizar.css

Esta folha de estilo de normalização CSS é de Jonathan Neal, co-autor de Normalize.css. Sanitize.css tem regras de estilo que o ajudarão a renderizar elementos HTML de forma consistente em diferentes navegadores.

Esta folha de estilo de normalização tem uma versão Sass, que muitos desenvolvedores irão apreciar para criação de sites.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *