14 práticas recomendadas de CSS para iniciantes

Quando você está começando com web design, um elemento-chave para fazer tudo funcionar corretamente e com a aparência que você deseja, cai nas mãos do CSS. Isso é abreviação de Cascading Style Sheets, e elas funcionam permitindo que você estilize elementos HTML da maneira que desejar.

E embora você possa experimentar o CSS de várias maneiras – na maioria das vezes em linha – há uma maneira melhor de fazer isso. E isso está de acordo com uma série de práticas recomendadas que você deve seguir para garantir que seu código seja funcional, desprovido de volume desnecessário e bem organizado.

Hoje, vamos destacar 14 melhores práticas de CSS para iniciantes, mas mesmo profissionais experientes devem retocar o básico algumas vezes.

1. Organize a folha de estilo

Sua primeira ordem de negócios ao aplicar as práticas recomendadas de CSS é organizar suas folhas de estilo. A forma como você aborda isso dependerá do seu projeto, mas, como regra geral, você deve seguir os seguintes princípios organizacionais:

Ser consistente

Não importa como você escolha organizar seu CSS, certifique-se de manter suas escolhas consistentes em toda a folha de estilo, bem como em todo o site.

De nomear classes a recuos de linha e estruturas de comentários, manter tudo consistente ajudará você a acompanhar seu trabalho com mais facilidade. Além disso, garante que as alterações posteriores sejam livres de dor de cabeça.

Use quebras de linha livremente

Embora o CSS funcione mesmo que seja visualmente feio, é melhor para você e para qualquer outro desenvolvedor que esteja trabalhando com seu código se você usar muitas quebras de linha para manter cada trecho de código separado e legível.

Normalmente, é melhor colocar cada par de propriedade e valor em uma nova linha.

Crie novas seções onde fizer sentido

Novamente, como você configura suas folhas de estilo dependerá em grande parte do tipo de site em que você está trabalhando. Mas, como regra geral, é uma boa ideia configurar seções para estilos conforme eles serão usados. Assim, uma seção para estilos de texto, uma seção para listas e colunas, uma seção para navegação e links e assim por diante. Você também pode criar seções para páginas específicas que podem ter um estilo diferente do resto, como a loja ou as perguntas frequentes.

Comente seu código

Mesmo que você veja seu CSS, ainda é uma boa ideia ser minucioso com seus comentários. Os comentários terão a seguinte aparência:

 /* This is what a standard CSS comment looks like */

Isso torna mais fácil para você descobrir qual é a relação de cada seção rapidamente, sem ter que se debruçar sobre cada linha posteriormente.

Os comentários podem ajudá-lo a definir seções, mas você também pode usá-los para fornecer informações sobre as decisões que tomou – especialmente se achar que pode esquecer mais tarde.

Use folhas de estilo separadas para projetos maiores

Isso não se aplica a todos os sites, mas se você tiver um site grande com necessidade de muito CSS específico, usar várias folhas de estilo é uma boa ideia. Ninguém – incluindo você – deveria ter que rolar por muito tempo para encontrar a única linha de código que você precisa.

Evite o incômodo e crie folhas de estilo separadas para diferentes seções do site – especialmente se elas tiverem estilos totalmente diferentes.

Por exemplo, você pode criar uma folha de estilo para estilos globais e outra para sua loja online com estilo dedicado para descrições de produtos, títulos ou preços.

2. CSS embutido x CSS externo x CSS interno

Existem três tipos diferentes de CSS com os quais você pode precisar lidar ao criar um site e ajustar seu estilo. Vamos falar um pouco sobre o que cada um é e faz e depois discutir o que você realmente deve usar para seus projetos.

• CSS embutido. Isso permite que você estilize elementos HTML específicos,
• CSS externo . Isso envolve o uso de um arquivo como uma folha de estilo para estilizar o site como um todo.
• CSS interno. Isso permite que você estilize uma página inteira em vez de elementos específicos.

Muitos desenvolvedores recomendam evitar o CSS embutido, pois geralmente não pode ser armazenado em cache, e é recomendável evitar dividir o CSS em vários arquivos. No mínimo, deve ser usado com moderação.

Nós só podemos ver a necessidade disso se você estiver usando um pouco de estilo em uma única seção, pedaço de texto ou área de uma única página do seu site. Essa é provavelmente a única situação em que o CSS embutido é uma solução viável.

Fora isso, usar CSS externo ou CSS interno, dependendo de suas necessidades, são as melhores opções, pois economizam tempo e esforço. Determine os estilos uma vez e aplique-os em todo o seu site. Bum – feito.

3. Reduza sua folha de estilo

Outra das melhores práticas de CSS é reduzir suas folhas de estilo. Existem inúmeras ferramentas de minificação disponíveis para acelerar os tempos de carregamento de suas folhas de estilo, inclusive diretamente no Kinsta CDN.

Isso permite que você ajuste as configurações de minificação de código em todo o site.

4. Use um pré-processador

Um pré-processador como Sass/SCSS permite usar variáveis ​​e funções, organizar melhor seu CSS e economizar tempo. Eles funcionam permitindo que você crie CSS a partir da sintaxe do pré-processador.

O que isso significa é que o pré-processador é como um “CSS +” onde inclui alguns recursos que normalmente não existem em CSS por si só. A adição desses recursos geralmente torna o CSS de saída mais legível e fácil de navegar.

Você precisará de um compilador CSS no servidor do seu site para usar os pré-processadores. Alguns dos pré-processadores mais populares incluem Sass, LESS e Stylus.

5. Considere uma estrutura CSS

Estruturas CSS podem ser úteis em alguns casos, mas podem ser desnecessárias para muitas pessoas, especialmente se o seu site for menor.

As estruturas podem facilitar a implantação rápida de grandes projetos e também evitar bugs. E eles fornecem o benefício da padronização, que é essencial quando várias pessoas estão trabalhando em um projeto ao mesmo tempo.

Todos usarão os mesmos procedimentos de nomenclatura, as mesmas opções de layout, os mesmos procedimentos de comentários e assim por diante.

Por outro lado, eles também resultam em sites com aparência genérica e grande parte do código pode acabar não sendo utilizado.

É provável que você já tenha se deparado com frameworks CSS antes. Bootstrap e Foundation são dois dos exemplos mais populares. Outros frameworks incluem Tailwind CSS e Bulma.

6. Comece com uma reinicialização

Outra coisa para colocar rapidamente em prática é iniciar seu trabalho de desenvolvimento com uma redefinição de CSS. Usar algo como normalize.css pode fazer com que todos os navegadores renderizem os elementos da página de maneira consistente, seguindo os padrões mais atualizados para minimizar as inconsistências do navegador.

Essa redefinição é, na verdade, um pequeno arquivo CSS que você carrega em seu site para adicionar um nível maior de consistência entre navegadores ao estilo dos elementos HTML e serve como uma maneira atualizada de realizar uma redefinição de CSS.

7. Aulas vs. IDs

A próxima coisa que você deve prestar atenção ao seguir as práticas recomendadas de CSS é como você trata classes e IDs. Caso você não esteja familiarizado, vamos definir ambos brevemente:

• Classe. O seletor de classe funciona selecionando um elemento com um atributo de classe. O que está no atributo class é o que determina como o elemento HTML é selecionado. Fica assim no código: .classname
• EU IRIA. O ID, por outro lado, funciona selecionando um elemento com um atributo ID. O atributo ID deve ser igual ao valor do seletor para que funcione. Você pode identificar um ID em CSS por este símbolo: # .

Um ID é usado para selecionar um único elemento enquanto uma classe é usada para selecionar mais de um elemento. Você usaria um ID para aplicar um estilo a um único elemento HTML. Você usaria uma classe para aplicar um estilo a mais de um elemento HTML. Seguir essa regra geral ajuda a manter seu código limpo e organizado e também reduz a ocorrência de código desnecessário ou duplicado.

Semelhante à nossa discussão sobre CSS inline vs externo acima, você usa um ID para aplicar um estilo a um único elemento. Basicamente, os IDs devem ser usados ​​para estilizar as exceções na página, não para estilos abrangentes que se aplicariam a toda a página ou site.

8. Evite Redundância

Outra das melhores práticas de CSS a seguir é evitar redundância sempre e da maneira que puder. Aqui estão algumas dicas gerais a serem seguidas para aplicar essa prática ao seu fluxo de trabalho:

Use o método DRY

O método DRY significa “Don’t Repeat Yourself” e é basicamente a ideia de que você nunca deve repetir código em CSS. Porque, na melhor das hipóteses, é uma perda de tempo e repetitivo para você inserir manualmente esses estilos repetidamente, mas na pior das hipóteses, pode desacelerar ativamente seu site.

É uma boa prática revisar seu código para remover redundâncias. Não há necessidade de tags para identificar o tamanho da fonte duas vezes na mesma seção, por exemplo. Remova as repetições e seu código lerá melhor e terá um desempenho melhor também.

Usar abreviação de CSS

A abreviação de CSS é uma ótima maneira de reduzir a quantidade de espaço que seu código ocupa enquanto ainda funciona como deveria. Você pode combinar vários estilos em uma única linha se isso fizer sentido. Por exemplo, se você estiver definindo os estilos de uma div específica, poderá listar a margem, o preenchimento, a fonte, o tamanho da fonte e a cor, tudo em uma única linha.

Adicione várias classes aos seus elementos

Onde aplicável, você também pode evitar redundâncias adicionando mais de uma classe a um elemento. Por exemplo, se o conteúdo da sua página já flutua para a esquerda graças à classe .left , mas você deseja posicionar uma coluna na página à direita, você pode adicionar isso ao elemento para evitar confusão e informar ao CSS especificamente qual elemento você gostaria de flutuar para a esquerda em cima do alinhamento esquerdo padrão.

E a melhor parte é que você pode adicionar quantas classes quiser a um elemento, desde que esteja separado por um espaço.

Combine elementos sempre que possível

Em vez de listar os elementos um por um, combine-os para economizar espaço e tempo. Frequentemente, os elementos dentro de uma única folha de estilo terão os mesmos estilos (ou similares). Não há necessidade de listar a fonte, a cor e o alinhamento de cada elemento de texto na página se todos compartilharem o mesmo estilo. Em vez disso, combine-os em uma única linha como esta:

 h1, h2, h3, p { font-family: ariel, color: #00000 }

Evite seletores extras desnecessários

Às vezes, seu código ficará um pouco confuso enquanto você trabalha na finalização do design do seu site. É por isso que é importante voltar e remover seletores desnecessários após o fato. Você também deve ficar de olho em seletores excessivamente complexos. Por exemplo, se você for criar listas de estilo em seu site, não precisará usar seletores como “corpo” ou “contêiner” ou qualquer coisa dessa natureza. Apenas .classname li { será suficiente.

9. Como importar fontes corretamente

Importar e usar fontes corretamente é outra maneira de garantir que seu CSS seja claro, conciso e otimizado.

Usando @font-face para importar fontes

Você pode adicionar praticamente qualquer fonte que desejar ao seu site, mas precisará seguir um procedimento específico para garantir que funcione corretamente.

1. Baixe a fonte que deseja usar. Há muitos lugares onde você pode obter fontes, incluindo Google e Adobe. Certifique-se de baixar o arquivo TrueType Font (.ttf) para a fonte escolhida.
2. Carregue a fonte personalizada que você deseja usar para o Webfont Generator disponibilizado pelo Font Squirrel. Baixe o Web Font Kit assim que for gerado. Ele deve conter vários arquivos, incluindo vários arquivos de fontes diferentes com extensões como .ttf, .woff, .woff2 e .eot. Também deve haver um arquivo CSS incluído.
3. Carregue o Web Font Kit em seu site usando FTP. As instruções específicas para isso variam dependendo do seu provedor de hospedagem, mas geralmente você pode acessar os arquivos do seu site usando um cliente FTP ou o gerenciador de arquivos na interface de administração do seu host, como o cPanel.
4. Atualize o arquivo CSS usando um editor de texto. Qualquer editor de texto HTML que você preferir fará como NotePad ou Sublime. Dentro deste arquivo, ele terá um “URL de origem” listado. Você precisará atualizá-lo para refletir onde o Web Font Kit está agora hospedado em seu servidor web. Copie o caminho do arquivo para onde cada arquivo de fonte está armazenado em seu host da Web para este arquivo da seguinte maneira:

 @font-face { font-family: "FontName"; src: url("https://sitename.com/css/fonts/FontName.eot"); src: url("https://sitename.com/css/fonts/FontName.woff") format("woff"), url("https://sitename.com/css/fonts/FontName.otf") format("opentype"), url("https://sitename.com/css/fonts/FontName.svg#filename") format("svg"); }

Você pode usar suas novas fontes adicionando-as aos arquivos CSS do seu site com a tag font-family .

Para melhorar o desempenho do site e evitar reajustes estranhos no layout do site durante o carregamento, você pode pré-carregar as fontes. Pré-carregar fontes e carregar fontes WOFF2 (ou o menor tamanho de fonte) primeiro pode melhorar drasticamente o desempenho. Você faz isso adicionando uma linha de código à tag <head> . Better Web Type oferece um exemplo conciso:

 <link rel="preload" as="font" href="/assets/fonts/3A1C32_0_0.woff2" type="font/woff2" crossorigin="crossorigin">

Outra coisa que você pode fazer é limitar o conjunto de caracteres para suas fontes personalizadas. Se você estiver usando apenas alguns caracteres de uma fonte (para um cabeçalho ou logotipo, talvez) você não precisa chamar todo o conjunto de caracteres, apenas alguns que você realmente precisa. De acordo com o novo código, para solicitar apenas os caracteres “Hello” você faria assim:

 <link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

Fontes de auto-hospedagem quando possível

O processo descrito acima é para fontes auto-hospedadas, mas é importante reiterar que essa é a melhor abordagem. Ele acelera consideravelmente o tempo de carregamento e significa que você não depende da velocidade de outro site para concluir o processo de carregamento do seu site.

Tenha cuidado com variações de fonte

As variações de fonte podem ser super úteis para adicionar estilos divertidos ao seu site. No entanto, se usados ​​incorretamente, eles também podem quebrar seu site.

Se você atribuir mais de um estilo em font-variation-settings , é provável que eles se sobreponham e um substituirá o outro. É muito melhor manter as coisas simples e usar propriedades de fonte, ilustradas aqui:

 .bold { font-weight: bold; } .italic { font-style: italic; }

Use uma fonte alternativa

Embora você possa se esforçar para adicionar uma fonte personalizada ao seu site e usá-la via CSS, ela ainda não funcionará 100% do tempo - especialmente quando acessada por alguém com um navegador desatualizado. Mas você ainda quer que esses visitantes do site tenham uma experiência de navegação agradável.

Para acomodar isso, é essencial definir uma fonte de fallback que possa ser usada caso nenhuma de suas outras fontes seja utilizável. Para fazer isso, você simplesmente listaria a fonte de fallback após sua fonte preferida ao atribuir um font-family . Dessa forma, o CSS chamará sua fonte preferida primeiro, depois sua segunda opção, depois sua terceira e assim por diante.

De acordo com o W3Schools, existem cinco categorias principais para famílias de fontes. O que se segue é uma lista dessas famílias com fontes de fallback populares que se encaixam em cada uma.

• Serifa: Times New Roman, Geórgia, Garamond
• Sem serifa: Arial, Tahoma, Helvetica
• Monoespaço: Courier New
• Cursiva: Brush Script MT
• Fantasia: Placa de cobre, Papiro

10. Torne o CSS Acessível

Todos devem tornar seus sites acessíveis – à queima-roupa. E isso vale para sua abordagem ao CSS também. Seu objetivo deve ser tornar seu site utilizável para o maior número possível de pessoas e implementar medidas de acessibilidade é uma maneira fantástica de conseguir isso.

Você pode tornar seu CSS acessível de várias maneiras:

• Adicione variação de cores aos links para destacá-los.
• Torne os pop-ups dispensáveis ​​pressionando a tecla ESC. Aqueles que usam leitores de tela ou ampliação geralmente não conseguem ver o “X” na tela para descartar um pop-up, portanto, é essencial torná-los dispensáveis ​​por meio de um pressionamento de tecla.
• Alguns dispositivos nem exibem pop-ups, portanto, certifique-se de que todas as informações essenciais sejam transmitidas para outro lugar.
• Elementos de foco (como dicas de ferramentas) devem ser acionados pela tecla Tab, bem como pelo mouse.
• Não remova os contornos. Os navegadores exibem um contorno em torno dos elementos nos quais o teclado está focado no momento automaticamente. Você pode desabilitar isso usando outline:none , mas você realmente não deveria, pois é inestimável para aqueles que usam leitores de tela ou que têm baixa visão e exigem pontos de destaque/foco adicionais para navegação.
• Melhore o indicador de foco. Como mencionado acima, os contornos em torno dos elementos destacados são essenciais para a navegação para muitos, mas o contorno padrão geralmente é pouco visível. Você pode modificar isso para ficar mais visível usando :focus para definir um estilo que chame mais atenção para o que está em foco no momento. Você pode fazer algo semelhante com :hover para melhorar os efeitos de capa. Um bom exemplo de modificação de :focus em ação vem de um conjunto de diretrizes de acessibilidade da Universidade de Washington:

 a { color: black; background-color: white; text-decoration: underline } a:focus, a:hover { color: white; background-color: black; text-decoration: none }

Esse snippet de código faz com que os links sejam mostrados como texto preto em um fundo branco, mas mudem para texto branco em um fundo quando colocados sob o foco do teclado (quando o usuário tabula para o elemento). O mesmo efeito ocorre ao passar o mouse também.

11. Implementar convenções de nomenclatura

Pode parecer pequeno no momento, mas o que você decide nomear as coisas no CSS pode ter impactos duradouros – e pode custar ativamente tempo e dinheiro no futuro, se feito de forma inadequada. Antes mesmo de começar a escrever CSS, você deve decidir sobre uma série de convenções de nomenclatura e cumpri-las.

Isso economizará muito tempo na depuração posterior, pois é menos provável que você se refira ao elemento errado ao escrever seu código. De acordo com o FreeCodeCamp, uma boa abordagem é manter a formatação padrão para nomes CSS, ou seja, font-weight vs fontWeight .

Use a convenção de nomenclatura BEM

Uma boa maneira de manter os nomes consistentes é usar a Convenção de Nomenclatura BEM. O objetivo do BEM é dividir a interface do usuário em componentes que você pode reutilizar várias vezes.

BEM significa Bloco, Elemento e Modificador. Mas vamos detalhar o que isso realmente significa.

• Bloco : um bloco pode ser qualquer parte do design do seu site, como um menu, cabeçalho, rodapé ou coluna. Seus blocos devem ter nomes como .main-nav ou .footer.
• Elemento . Os elementos descrevem os pedaços que compõem cada bloco. Pense em coisas como fontes, cores, botões, listas ou links. Ao usar a convenção de nomenclatura BEM, os elementos são identificados colocando dois sublinhados antes do nome do elemento. Então, se quiséssemos falar sobre a fonte usada no cabeçalho do seu site, ficaria assim em CSS com a convenção de nomenclatura BEM: .header__font
• Modificador . A última peça do quebra-cabeça BEM é o modificador. Os modificadores são como você estabelece o estilo do elemento dentro do bloco. Isso inclui coisas como nomes de fontes, pesos e tamanhos; valores de cores; e valores de alinhamento. Continuando a trabalhar com o exemplo estabelecido acima, se você quisesse definir a cor da fonte dentro do cabeçalho, você escreveria assim com o elemento e o modificador separados por dois hífens: .header__font–red

Seguir essa convenção de nomenclatura – ou qualquer outra coisa que sua equipe decida – pode tornar a experiência de edição e depuração muito mais agradável no futuro.

12. Evite a tag !Importante

Outra prática recomendada para implementar em sua rotina de trabalho CSS é evitar o uso excessivo da tag !important o máximo que puder.

Embora possa corrigir problemas, seu uso geralmente leva a confiar nele como uma muleta. E isso pode resultar em uma confusão de tags !importantes em todo o seu código que podem eventualmente quebrar seu site.

O que isso realmente se resume a especificidade. Se um seletor for muito específico, seu navegador da Web determinará que ele é mais importante do que com seletores menos específicos. A tag !important pode ser usada para identificar propriedades que são mais importantes que outras.

Isso pode ser complicado, pois muitas vezes você acaba precisando usar várias tags !important – cada uma para substituir uma anterior em cenários específicos. E fazer isso demais pode fazer com que seu site quebre ou seus estilos sejam carregados incorretamente. Na maioria das vezes, essa tag é usada como uma solução de curto prazo, mas geralmente se torna permanente e pode causar problemas mais tarde, quando é hora de depurar, em particular.

Uma das únicas vezes em que o uso da tag !important é considerado geralmente aceitável é permitir que o usuário final substitua estilos para uso com leitores de tela e outros auxílios de acessibilidade. Também é útil ao lidar com classes utilitárias.

13. Use o Flexbox

Você também pode tirar mais proveito do Flexbox ao tentar implementar as melhores práticas para lidar com CSS em seu fluxo de trabalho. O Flexbox é uma maneira flexível de criar um layout da Web e alinhar elementos na página, em vez de usar a opção tradicional de flutuação.

De acordo com o CSS-Tricks, o Flexbox é um módulo de caixa flexível que é uma forma alternativa de estruturar seu CSS prestando atenção em como seus layouts são alinhados e distribuídos em um contêiner. A melhor parte é que o tamanho do container em si nem precisa ser conhecido, e sim as propriedades contidas irão “flexionar” com a mudança do tamanho do container. Esta é uma ótima maneira de acomodar dispositivos móveis.

Outra diferença importante é que o Flexbox é “independente de direção”, o que significa que seus layouts não são estruturados verticalmente ou horizontalmente. Isso o torna uma escolha melhor para projetar sites e aplicativos complicados que devem acomodar muitas mudanças de orientação da tela. Os layouts CSS padrão são baseados em blocos e os layouts flexbox contam com “fluxo flexível”. Novamente, CSS-Tricks oferece um desenho conciso que ilustra bem esse conceito:

Os elementos dentro do flexbox são dispostos no eixo principal e no eixo cruzado , onde cada elemento e propriedade dentro são projetados para flex e fluxo com base no tamanho do contêiner flex.

14. Dica do WordPress: não modifique diretamente os arquivos do tema

A última das melhores práticas de CSS que discutiremos aqui hoje é para usuários do WordPress, especificamente. Nunca é uma boa ideia modificar os arquivos do seu tema diretamente. Qualquer atualização do site pode eliminar essas alterações ou quebrar seu site. Não vale o risco.

Em vez disso, você pode usar a opção CSS Adicional no Personalizador de Temas para fazer as alterações que desejar. No entanto, você deve ter em mente que isso injeta o CSS inline e o colocará diretamente na cabeça.

Se você quiser apenas fazer uma ou duas alterações, essa pode ser uma opção viável, no entanto, qualquer coisa que você colocar na caixa CSS Adicional permanecerá, mesmo se você realizar uma atualização de tema, uma atualização de site ou mesmo se você alterar os temas .

Agora, se modificações CSS mais robustas forem necessárias, é melhor adicioná-las a partir de uma folha de estilo CSS personalizada ou usar um tema filho no qual você modifica o arquivo style.css para o tema filho diretamente. Este método também é à prova de atualização.

Resumo

Mergulhar de cabeça na criação de CSS útil e preciso pode parecer muito para um verdadeiro novato, mas dedicar um tempo para se educar sobre as melhores práticas pode economizar muito tempo, esforço e dor de cabeça mais tarde.

Esperamos que esta coleção de práticas recomendadas ajude a orientá-lo no caminho certo para criar sites funcionais, úteis e acessíveis nos próximos anos. Boa sorte!