Práticas recomendadas de CSS: 16 maneiras de melhorar suas habilidades de CSS rapidamente

Você é um iniciante em CSS e constantemente se pergunta se está fazendo as coisas direito? Você já se perguntou se sua marcação está à altura? Nesse caso, é hora de aprender algumas práticas recomendadas de CSS.

Aderindo às diretrizes básicas para escrever CSS, você pode ter certeza de produzir um código limpo, legível e facilmente suportável. Você sabe, o tipo que permite que os outros entendam o que ele faz e que deixa você orgulhoso de olhar.

Se alguma dessas coisas (ou ambas) for algo que você deseja, vamos falar sobre as práticas recomendadas de CSS que permitem que você faça isso.

1. Torne seu código legível

A formatação adequada garante que o código seja legível para você e outros desenvolvedores humanos. Embora não seja necessário que as máquinas (ou seja, navegadores) executem, é simplesmente uma boa prática tornar seu CSS fácil de ler. Isso o torna mais confortável de entender, manter e trabalhar.

Escrevemos um artigo inteiro sobre formatação de código e comentários, então não vamos repetir tudo aqui. No entanto, aqui está uma visão geral rápida (confira o artigo para ver tudo):

• Recue seu código — Se você usa tabulações ou vários espaços (decida quantos!), certifique-se de recuar seus pares de valores CSS. Ao usar consultas de mídia , aninhe-as umas nas outras para mostrar a dependência.
• Use quebras de linha — Separe propriedades CSS distintas com quebras de linha e coloque os pares de valores em suas próprias linhas.
• Organize as regras em ordem alfabética — Assim fica mais fácil encontrar o que você está procurando.
• Usar comentários — Inclua comentários para separar diferentes seções da folha de estilo umas das outras. Além disso, considere incluir um sumário no início do arquivo. Você também pode deixar comentários com informações importantes que você pode esquecer mais tarde ou que são importantes para entender a presença de alguma marcação (por exemplo, fallbacks para navegadores mais antigos).

Aqui está um exemplo de código CSS bem formatado:

.search-submit {
	border-radius: 0 2px 2px 0;
	bottom: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 42px;
}

@media screen and (min-width: 56.875em) {
	.site-header {
		padding-right: 4.5455%;
		padding-left: 4.5455%;
	}
}

Embora existam convenções diferentes para formatar a marcação CSS, a parte importante é que você permaneça consistente. Nada faz um arquivo CSS ou seu autor parecer mais confuso do que uma formatação inconsistente. Portanto, estabeleça suas preferências e fique com elas. Se houver um guia de estilo existente, atenha-se a ele.

Quando você permanece consistente, mesmo que estrague tudo, é muito mais fácil corrigir todos os mesmos erros de uma vez (obrigado, pesquise e substitua !).

2. Formate bem sua folha de estilo

Você não deve apenas tornar seu código legível, mas também garantir que suas folhas de estilo CSS sejam fáceis de manusear e bem organizadas. Aqui estão algumas dicas e práticas recomendadas para isso:

• Use uma abordagem de cima para baixo — Ordene os estilos em seu arquivo à medida que são renderizados no navegador. Isso significa ir de regras mais gerais para marcações mais específicas. Por exemplo, comece com body, a, p, depois cabeçalhos , depois elementos mais específicos.
• Divida os arquivos em seções — agrupe estilos em áreas temáticas: tipografia , links, navegação, etc. Mesmo páginas únicas podem ter sua própria seção se vierem com seu próprio estilo. Veja também o conselho anterior sobre comentários e criação de um sumário. Além disso, você também pode comentar para marcar seções específicas.
• Use folhas de estilo separadas para grandes projetos — Se sua marcação incluir milhares de linhas de códigos, pode fazer sentido dividi-la em vários arquivos para diferentes seções de seu site. Isso é especialmente verdadeiro se essas seções tiverem estilos muito diferentes (por exemplo, uma loja on -line versus uma página sobre). Nesse caso, uma folha maior para estilos globais e arquivos menores separados para seções específicas do site fazem mais sentido.

3. Livre-se da redundância

Código redundante é o código que ocupa mais espaço do que o necessário. Ele carrega mais devagar e também é mais difícil de manter e solucionar problemas. Portanto, é importante evitar redundância sempre que possível. Aqui vão algumas dicas para isso:

• Use DRY (“Don’t Repeat Yourself”) — Verifique se há repetições em sua marcação. Eles tornam seu código mais lento e difícil de ler. Defina as coisas uma vez e, em seguida, sobrescreva-as mais abaixo, conforme necessário.
• Aproveite a abreviação do CSS — o CSS oferece muitas possibilidades para definir várias propriedades de uma só vez. Por exemplo, margin-top, margin-bottom, margin-righte margin-leftpodem ser definidos com uma única margindeclaração. Ele ocupa menos espaço, usa menos código e funciona tão bem, resultando em melhor desempenho.
• Combine seletores sempre que possível — Se vários elementos, como as definições de tipografia para títulos e parágrafos, compartilharem os mesmos estilos, certifique-se de combiná-los em um conjunto de regras de chamada. Não há necessidade de repetir a mesma marcação separadamente.
• Evite seletores redundantes — Seja o mais específico possível com seus seletores para alcançar seu resultado, mas não além disso. Aderir a isso também facilita a substituição da marcação por CSS mais específico, se necessário. Por outro lado, evite seletores muito amplos, pois eles usam mais poder de processamento.

4. Importante: Evite!importante

Em seguida, em nossas práticas recomendadas de CSS, tente evitar o uso da !importanttag o máximo possível.

Você provavelmente está ciente de que esta é a opção nuclear para que uma declaração CSS se propague por toda a cascata sem ser substituída. O problema é que, se você confiar demais nele, poderá precisar de muitos deles, o que resultará no seu código CSS terminando no que chamamos de bagunça (para usar o termo técnico).

A verdade é que, se você está confiando em !importantfazer sua marcação funcionar, provavelmente terá que gastar mais algum tempo aprendendo sobre a especificidade do CSS . Se você sabe como a especificidade funciona, geralmente não é tão difícil criar um seletor mais direcionado para sobrescrever o que você precisa sobrescrever.

Outros casos em que !importanté frequentemente usado são estilos embutidos ou folhas de estilo externas. Se você os encontrar, deve usar isso como uma oportunidade para pensar em uma melhor organização e estrutura de seus estilos, em vez de se tornar nuclear.

Resumindo, reserve !important para fins de teste, mas evite em ambientes de produção.

5. Considere o uso de uma estrutura

As estruturas CSS podem ser muito úteis e ajudá-lo a começar a trabalhar rapidamente. Como outros frameworks, eles vêm com elementos pré-configurados que você pode usar para criar layouts rapidamente e sem precisar começar do zero. Se você quiser aprender mais sobre estruturas CSS, pode consultar Tailwind , Bootstrap ou Bulma.

Ao mesmo tempo, há uma grande ressalva: só traga um framework para o seu projeto se for realmente usá-lo. Caso contrário, provavelmente prejudicará seu desempenho. Se você se comprometer com uma estrutura para apenas um recurso, ela ainda precisará carregar toda a folha de estilo para funcionar. Como você pode imaginar, geralmente é muito mais código do que vale a pena.

Portanto, se você estiver sobrescrevendo seus estilos de estrutura ou hackeando-os de outra forma, provavelmente não deveria usá-los.

6. Use um reset/normalize seu CSS

As redefinições aparecem no início de uma folha de estilo e definem várias propriedades padrão, como altura da linha, margens, cores de fundo etc. para o seu site. Isso ajuda a eliminar inconsistências de design em diferentes navegadores e cria uma linha de base comum. Aqui está um exemplo:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

O acima é do MeyerWeb, uma das soluções mais populares. Você também pode procurar em Normalize.css.

7. Acessibilidade incorporada ao seu design

Tornar seu site acessível significa torná-lo utilizável para o maior número possível de pessoas, independentemente de suas habilidades. Seu CSS desempenha um papel importante nisso, então vamos ver algumas práticas recomendadas para isso:

• Forneça contraste suficiente — Certifique-se de que haja variação suficiente entre o primeiro plano (por exemplo, texto) e as cores de fundo para que pessoas com deficiência visual possam lê-lo. Você pode usar um verificador de contrastepor isso. Da mesma forma, deixe seus links coloridos para que sejam reconhecíveis. Além disso, use um tamanho de fonte grande o suficiente (pelo menos 18-20px).
• Mantenha a outlinepropriedade — Contornos são cruciais para as pessoas que navegam em seu site com um teclado ou leitores de tela. Eles ajudam a rastrear qual elemento está ativo. Se você não gosta da aparência do seu contorno, tem a possibilidade de estilizá-lo.
• Mantenha os elementos de foco visíveis — Da mesma forma, certifique-se de que as dicas de ferramentas ou outros elementos que aparecem ao passar o mouse sobre um elemento também apareçam quando selecionados por meio da guia. Olhe para os papéis ARIA para isso.

8. Evite editar as folhas de estilo do tema diretamente no WordPress

O WordPress vem com bastante CSS, a maior parte residindo em folhas de estilo de tema (a menos que você esteja usando um tema de bloco). Se o seu plano é fazer alterações no estilo do seu tema, a pior ideia é editar style.cssdiretamente.

Por quê?

Porque da próxima vez que você clicar no botão Atualizar agora para o seu tema (ou da próxima vez que suas atualizações automáticas entrarem em ação), todas as suas modificações serão apagadas.

Então, o que fazer em vez disso?

Se você está planejando apenas mudanças menores, você pode usar a seção CSS Adicional no WordPress Customizer.

É à prova de atualização e injeta seu CSS diretamente na <head>seção do seu site.

Caso contrário, para modificações maiores, use um tema filho. Qualquer coisa que você colocar em sua folha de estilo substituirá o que está no tema pai e também permanecerá em uma atualização de tema.

9. Dicas rápidas para práticas recomendadas de CSS

Tudo bem, para a seção final, daremos algumas práticas recomendadas de CSS rápidas para você ter em mente:

• Aprenda sobre classes versus IDs — Classes e IFs são usados ​​de maneiras muito diferentes. Classes são para elementos repetidos, IDs para elementos únicos. Para mais informações
• Opte por flex e grid em vez de float — Floats costumavam ser a principal maneira de organizar elementos da web para a esquerda e para a direita e criar layouts. Até agora, existem sistemas sólidos para isso com flexbox e grid , então aproveite o tempo e use-os.
• Aproveite os pré-processadores — Os pré-processadores ajudam a organizar sua marcação, evitar a repetição, adicionar modularização, fornecer automação e muito mais. Em tempos de variáveis ​​personalizadas, elas não são mais tão necessárias, mas ainda são úteis. Os mais populares são SASS , LESS e Stylus . Você também pode procurar pós-processadores como PostCSS e autoprefixer .
• Use unidades relativas — Nos dias de design responsivo e sites exibidos em uma ampla variedade de tamanhos de tela, você geralmente deve confiar em unidades como em, rem, %e outros tamanhos relativos. Tamanhos fixos como pxsão apenas para determinados cenários.
• Minimize seu CSS — Minificar remove todas as coisas do código que são necessárias para a leitura humana (ou seja, tudo o que dissemos para você colocar anteriormente). No entanto, os navegadores não precisam de formatação especial e a minimização resulta em arquivos menores e carregamento mais rápido, então vá em frente! Autoptimize é um ótimo plugin que pode fazer isso automaticamente.
• Remova a marcação não utilizada — Por motivos semelhantes aos descritos acima, verifique se há marcações em seu código que não estão sendo usadas em suas páginas e remova-as. Isso reduzirá ainda mais seus arquivos. 
• Use um validador de CSS — Valide seu CSS para verificar se sua marcação está sendo usada corretamente. Existem ferramentas online suficientes para isso.

As melhores práticas de CSS são uma ótima base para aprendizado adicional

Quando você entra no CSS pela primeira vez, pode ser um pouco opressor. Há tanto para aprender e muito para envolver sua cabeça. Adotando as práticas recomendadas de CSS desde o início, você terá uma boa base para se sustentar e continuar aprendendo.

Acima, cobrimos algumas das práticas mais importantes a serem adotadas. Isso não é tudo o que há para saber em termos de práticas recomendadas de CSS, mas é um bom lugar para começar. Esperamos que você aproveite sua jornada!