Quando você está começando com o web design, um elemento chave para fazer tudo funcionar corretamente é como você quer que tudo esteja nas mãos do CSS. Abreviação de Cascading Style Sheets, eles funcionam permitindo que você estilize os elementos HTML da maneira que quiser.
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 melhores práticas 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 até mesmo profissionais experientes devem às vezes aperfeiçoar o básico.
Confira nosso guia em vídeo com as melhores práticas de CSS para iniciantes
1. Organize a folha de estilo (Stylesheet)
Sua primeira ordem de negócios ao aplicar as melhores práticas do CSS é organizar suas folhas de estilo. Como você abordará isso dependerá do seu projeto, mas como regra geral, você vai querer seguir os seguintes princípios organizacionais:
Seja consistente
Não importa como você escolha organizar seu CSS, certifique-se de manter suas escolhas consistentes em toda a folha de estilos, bem como em todo o seu site.
De classes de nomes a endentações de linhas a estruturas de comentários, manter tudo consistente ajudará você a acompanhar o seu trabalho mais facilmente. Além disso, ele garante que fazer mudanças, mais tarde, é sem dor de cabeça.
Use as quebras de linha de forma liberal
Embora o CSS funcione mesmo que seja visualmente feio, é melhor para você e para qualquer outro desenvolvedor que estará trabalhando com seu código se você usar muitas quebras de linha para manter cada trecho de código separado e legível.
Tipicamente, é melhor colocar cada propriedade e par de valores em uma nova linha.
Crie novas seções onde faz 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 criar seções de estilos, pois elas serão usadas. Então, 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ê pode até mesmo criar seções para páginas específicas que podem ter estilos diferentes dos demais, como a loja ou FAQs.
Comente seu código
Mesmo que apenas você veja o seu CSS, ainda é uma boa ideia ser minucioso com seus comentários. Os comentários serão parecidos com os seguintes:
/* This is what a standard CSS comment looks like */Isto torna mais fácil para você descobrir o que cada seção está em relação a um relance sem ter que passar por cima de cada linha mais tarde.
Os comentários podem ajudá-lo a definir as seções, mas você também pode usá-los para fornecer informações sobre as decisões que você tomou – especialmente se você sentir que pode esquecer mais tarde.
Use folhas de estilo separadas para projetos maiores
Isto não se aplica a todos os sites, mas se você tem um site grande com necessidade de um monte de CSS específicos, usar múltiplas folhas de estilo é uma boa ideia. Ninguém – incluindo você – deve ter que rolar por um tempo super longo 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 desejar criar uma folha de estilo para estilos globais e outra para a sua loja online com estilo dedicado para descrições de produtos, cabeçalhos ou preços.
2. CSS Inline vs CSS Externo vs CSS Interno
Existem três tipos diferentes de CSS com os quais você pode precisar lidar ao construir um site e ajustar o seu estilo. Vamos falar um pouco sobre o que cada um é e faz e depois discutir qual você deve realmente estar usando para seus projetos.
- CSS Inline. Isto permite que você estilize elementos HTML específicos,
- CSS externo. Isto envolve o uso de um arquivo como uma folha de estilo para estilizar o site como um todo.
- CSS interno. Isto permite que você estilize uma página inteira ao invés de elementos específicos.
Muitos desenvolvedores recomendam evitar o CSS em linha, já que ele normalmente não pode ser colocado em cache, e é recomendado evitar a divisão do CSS em vários arquivos. No mínimo, ele deve ser usado com parcimônia.
Realmente só podemos ver a necessidade disso se você estiver usando um pouco de estilo em uma única seção, texto ou área de uma única página do seu site. Essa é provavelmente a única situação onde o CSS inline é 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 seu tempo e esforço. Determine os estilos uma vez e aplique-os em todo o seu site. Boom – feito.
3. Minifique sua folha de estilo
Outra das melhores práticas do CSS é minificar as suas folhas de estilo. Há numerosas ferramentas de minificação disponíveis para acelerar o tempo de carregamento de suas folhas de estilo, incluindo diretamente dentro do Kinsta CDN.
Isto permite que você ajuste as configurações de minificação de código em todo o seu site.
4. Use um pre-processor
Um pré-processador como o Sass/SCSS permite que você use variáveis e funções, organize melhor o seu CSS e economize tempo. Eles funcionam permitindo que você crie CSS a partir da sintaxe do pré-processador.
O que isto significa é que o pré-processador é como um “CSS +” onde ele inclui um par de características que normalmente não existem no CSS por si só. A adição dessas características torna o CSS de saída mais legível e mais fácil de navegar.
Você vai precisar de um compilador CSS no servidor do seu site para fazer uso de pré-processadores. Alguns dos pré-processadores mais populares incluem Sass, LESS, e Stylus.
5. Considere um Framework CSS
Framework CSS podem ser úteis em alguns casos, mas podem ser desnecessárias para muitas pessoas, especialmente se o seu site estiver no lado menor.
Frameworks 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 estarão usando os mesmos procedimentos de nomeação, as mesmas opções de layout, os mesmos procedimentos de comentário, e assim por diante.
Por outro lado, eles também resultam em sites de 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 Framework de CSS antes. Bootstrap e Foundation são dois dos exemplos mais populares. Outros frameworks incluem Tailwind CSS e Bulma.
6. Comece com um Reset
Outra coisa a ser rapidamente colocada em prática é iniciar seu trabalho de desenvolvimento com um reset do CSS. Usando algo como normalize.css pode fazer com que todos os navegadores renderizem os elementos da página de forma consistente enquanto seguem os padrões mais atualizados para minimizar as inconsistências do navegador.
Este reset é na verdade um pequeno arquivo CSS que você carrega no seu site para adicionar um maior nível de consistência entre navegadores ao estilo dos elementos HTML e serve como uma forma atualizada de conduzir um reset CSS.
7. Classes vs ID
A próxima coisa que você deve prestar atenção ao seguir as melhores práticas do CSS é como você trata as aulas e as identificações. No caso de você não estar familiarizado, vamos definir ambos brevemente:
- Classe. O seletor de classes funciona selecionando um elemento com um atributo de classe. O que está no atributo de classe é o que determina como o elemento HTML é selecionado. Ele se parece com isto em código: .classsname
- ID. O ID, por outro lado, funciona através da seleção de um elemento com um atributo ID. O atributo ID tem que ser o mesmo que o valor do seletor para que ele funcione. Você pode identificar um ID no 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 esta regra geral ajuda a manter seu código limpo e arrumado e também reduz a instância de código desnecessário ou duplicado.
Similar à nossa discussão do CSS inline vs. CSS externo acima, você usa um ID para aplicar um estilo a um único elemento. Basicamente, os IDs são destinados a serem 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 a redundância
Outra das melhores práticas do CSS a seguir é evitar a redundância sempre e como você puder. Aqui estão algumas dicas gerais a seguir para aplicar esta 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 o código no CSS. Porque, na melhor das hipóteses, é uma perda de tempo e repetição para você inserir manualmente estes estilos uma e outra vez, mas na pior das hipóteses, isso pode atrasar ativamente o 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 irá ler melhor e ter um melhor desempenho também.
Use o Shorthand CSS
O Shorthand CSS é uma ótima maneira de reduzir a quantidade de espaço que seu código ocupa enquanto ainda está funcionando como deveria. Você pode combinar vários estilos dentro de uma única linha se fizer sentido fazê-lo. Por exemplo, se você estiver definindo os estilos de um determinado mergulho, você pode listar a margem, o preenchimento, a fonte, o tamanho da fonte e a cor, tudo em uma única linha.
Adicione múltiplas classes ao seu elemento
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á estiver flutuando para a esquerda graças à classe .left mas você quiser posicionar uma coluna na página à direita, você pode adicionar isso ao elemento para evitar confusão e dizer especificamente ao CSS qual elemento você gostaria de flutuar para a direita no topo do alinhamento padrão à esquerda.
E a melhor parte é que você pode adicionar quantas classes quiser a um elemento, desde que ele esteja separado por um espaço.
Combine elementos onde for possível
Ao invés de listar elementos um por um, combine-os para economizar espaço e tempo. Muitas vezes, os elementos dentro de uma única folha de estilo terão o mesmo estilo (ou similar). Não há necessidade de listar a fonte, cor e alinhamento para cada elemento de texto na página se todos eles compartilharem o mesmo estilo. Ao invés disso, combine-os em uma única linha como esta:
h1, h2, h3, p {
font-family: arial,
color: #00000
}Evite seletores extras desnecessários
Às vezes seu código vai ficar um pouco confuso enquanto você trabalha na finalização do design do seu site. É por isso que é importante voltar atrás e remover seletores desnecessários depois do fato. Você deve ficar de olho em seletores excessivamente complexos também. Por exemplo, se você estava indo para listas de estilo em seu site, você não precisa usar seletores como “corpo” ou “container” ou qualquer coisa dessa natureza. Apenas .classname li { será suficiente.
9. Como importar adequadamente as fontes
Importar e usar corretamente as fontes é 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 quiser ao seu site, mas você precisará seguir um procedimento específico para garantir que ele funcione corretamente.
- Faça o download da fonte que você deseja usar. Há muitos lugares onde você pode encontrar fontes, incluindo Google e Adobe. Certifique-se de que você está baixando o arquivo TrueType Font (.ttf) para a fonte que você escolheu.
- Faça o upload da fonte personalizada que você quer usar para o Gerador de Fontes da Web disponibilizado pelo Font Squirrel. Faça o download do Web Font Kit assim que ele for gerado. Ele deve conter vários arquivos, incluindo vários arquivos de fontes diferentes com extensões como .ttf, .woff, .woff2, e .eot. Deve haver também um arquivo CSS incluído.
- Faça o upload do Kit de Fontes da Web para o seu site usando FTP. As instruções específicas para isso variam dependendo do seu provedor de hospedagem web, mas geralmente, você pode acessar os arquivos do seu site usando um cliente FTP ou o gerenciador de arquivos na interface administrativa do seu provedor web, como o cPanel.
- Atualize o arquivo CSS usando um editor de texto. Qualquer editor de texto HTML que você preferir fará como o NotePad ou o Sublime. Dentro deste arquivo, ele terá uma “URL fonte” listada. Você precisará atualizar isto para refletir onde o Web Font Kit está agora sendo alojado no seu servidor web. Copie o caminho do arquivo para onde cada arquivo de fonte está armazenado em seu servidor web para este arquivo da seguinte forma:
@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 então colocar suas novas fontes para usar, adicionando-as aos arquivos CSS do seu site com a etiqueta font-family.
Para melhorar o desempenho do site e evitar reajustes estranhos do layout do seu site à medida que ele carrega, você pode pré-carregar fontes. Pré-carregar fontes e carregar fontes WOFF2 (ou o menor tamanho de fonte de outra forma) primeiro pode melhorar drasticamente o desempenho. Você faz isso adicionando uma linha de código na tag <head>. O Melhor Tipo de Web 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 as 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 “Olá” você faria isso da seguinte forma:
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">Fontes Self-Hosted quando for possível
O processo descrito acima é para fontes Self-Hosted, mas é importante reiterar que esta é a melhor abordagem. Ela acelera consideravelmente o tempo de carregamento e significa que você não está confiando na velocidade de outro site para completar o processo de carregamento do seu site.
Seja cuidadoso com as variações das fontes
Variações de fonte podem ser super úteis para adicionar estilos divertidos ao seu site. No entanto, se mal utilizadas, elas também podem quebrar o seu site.
Se você atribuir mais de um estilo sob a font-variation-settings, é provável que eles se sobreponham e um se sobreponha ao outro. Você está muito melhor mantendo as coisas simples e usando as propriedades das fontes, ilustradas aqui:
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}Use uma fonte Fallback
Embora você possa passar pelo esforço de adicionar uma fonte personalizada ao seu site e usá-la via CSS, ela ainda não vai funcionar 100% do tempo – especialmente quando acessada por alguém com um navegador web 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 que possa ser usada caso nenhuma das suas outras fontes seja utilizável. Para fazer isso, você simplesmente listaria a fonte fallback após a fonte de sua preferência ao atribuir uma fonte-família. Desta forma, o CSS chamará sua fonte preferida primeiro, depois sua segunda escolha, depois sua terceira, e assim por diante.
De acordo com a W3Schools, existem cinco categorias primárias para famílias de fontes. O que segue, é uma lista dessas famílias com fontes populares que se encaixam em cada uma delas.
- Serif: Times New Roman, Georgia, Garamond
- Sans-serif: Arial, Tahoma, Helvetica
- Monospace: Courier New
- Corsivo: Brush Script MT
- Fantasia: Copperplate, Papyrus
10. Torne o CSS Acessível
Todos deveriam estar tornando seus sites acessíveis – em branco. E isto vale também para a sua abordagem ao CSS. Seu objetivo deve ser tornar seu site utilizável para o maior número de pessoas possível e implementar medidas de acessibilidade é uma maneira fantástica de realizar isso.
Você pode tornar o seu CSS acessível de várias maneiras:
- Adicione variação de cores aos links para que eles se destaquem.
- Tornar os pop-ups dispensáveis pressionando a tecla ESC. Aqueles que usam leitores de tela ou magnificação muitas vezes não serão capazes de ver o “X” na tela para dispensar um pop-up, então torná-los proibidos através de um pressionamento de tecla é essencial.
- Alguns dispositivos nem mesmo mostrarão pop-ups em primeiro lugar, então certifique-se de que todas as informações essenciais sejam transmitidas em outro lugar.
- Elementos de pairar (como pontas de ferramentas) devem ser acionados pela tecla Tab, assim como uma pausa do mouse.
- Não remova os contornos. Os navegadores exibem um contorno em torno de elementos nos quais o teclado está atualmente focado automaticamente. Você pode desativar isto usando outline:none mas você realmente não deve, pois é inestimável para aqueles que usam leitores de tela ou que têm baixa visão e requerem pontos de destaque/foco adicionais para a navegação.
- Melhore o indicador de foco. Como mencionado acima, os contornos em torno de elementos destacados são essenciais para a navegação de muitos, mas o contorno padrão é quase sempre pouco visível. Você pode modificar isto para ser mais visível usando :focus para definir um estilo que chame mais atenção para o que está atualmente em foco. Você pode fazer algo similar com :hover para melhorar os efeitos de cobertura. Um bom exemplo de modificação do :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
}Este trecho de código faz com que os links sejam mostrados como texto preto sobre um fundo branco, mas mudam para texto branco sobre um fundo quando colocado sob o foco do teclado (quando as abas do usuário para o elemento). O mesmo efeito ocorre quando se flutua também.
11. Implementação de convenções de nomeação
Pode parecer pequeno no momento, mas o que você decide nomear as coisas no CSS pode ter impactos duradouros – e pode custar a você tempo e dinheiro ativamente no futuro se feito de forma imprópria. Antes mesmo de começar a escrever o CSS, você deve decidir sobre uma série de convenções de nomeação e aderir a elas.
Isto lhe poupará muito tempo na depuração mais tarde, já que é menos provável que você se refira ao elemento errado ao escrever seu código. De acordo com o FreeCodeCamp, uma boa abordagem é se ater à formatação padrão para nomes CSS, ou seja, font-weight vs fontWeight.
Use a convenção de nomeação BEM
Uma boa maneira de manter os nomes consistentes é usar a Convenção de Nomenclatura BEM. O objetivo da BEM é quebrar a interface do usuário em componentes que você pode reutilizar repetidamente.
BEM significa Bloco, Elemento e Modificador. Mas vamos quebrar o que isso realmente significa.
- Bloco: Um bloco pode ser qualquer pedaço de design em seu site como um menu, cabeçalho, rodapé ou coluna. Seus blocos devem ter nomes como .main-nav ou .footer.
- Elemento. Elementos descrevem os pedaços e peças 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 nós quiséssemos falar sobre a fonte usada no cabeçalho do seu site, seria assim no CSS com a convenção de nomenclatura da BEM: .header__font
- Modificador. A última peça do quebra-cabeça da BEM é o modificador. Modificadores são a forma como você estabelece o estilo do elemento dentro do bloco. Estes incluem 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ê a escreveria assim com o elemento e o modificador separados por dois hífens: .header__font-red
Seguir esta convenção de nomenclatura – ou algo mais que sua equipe decida – pode tornar a experiência de edição e depuração muito mais agradável mais tarde no caminho.
12. Evite a tag !Important
Outra melhor prática a ser implementada em sua rotina de trabalho do CSS é evitar o uso excessivo da tag !important tanto quanto você puder.
Embora possa resolver problemas, seu uso muitas vezes leva a confiar nele como uma muleta. E isso pode resultar em uma bagunça de tags !important em todo o seu código que pode eventualmente quebrar o seu site.
O que realmente se resume a isso é a especificidade. Se um seletor é muito específico, o seu navegador da web determinará que é mais importante do que com seletores menos específicos. A tag !important pode ser usada para identificar propriedades que são mais importantes do que outras.
Isto pode ficar complicado, pois muitas vezes você vai precisar usar várias tags !Important – cada uma para substituir uma anterior em cenários específicos. E fazer isso em demasia pode fazer seu site quebrar ou seus estilos serem carregados incorretamente. Na maioria das vezes, esta tag é usada como uma solução a curto prazo, mas muitas vezes ela se torna permanente e pode causar problemas mais tarde quando for hora de depurar, em particular.
Uma das únicas vezes que o uso da tag !important é considerado geralmente aceitável é permitir que o usuário final sobreponha estilos para uso com leitores de tela e outras ajudas de acessibilidade. Também é útil quando se lida com classes utilitárias.
13. Use o Flexbox
Você também pode obter mais milhagem do Flexbox ao tentar implementar melhores práticas para lidar com o CSS em seu fluxo de trabalho. O Flexbox é uma maneira flexível de criar um layout web e alinhar elementos na página, ao invés de usar a opção de flutuação tradicional.
De acordo com o CSS-Tricks, 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 dentro de um contêiner. A melhor parte é que o tamanho do container em si não precisa nem ser conhecido, e ao invés disso 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 chave é que o Flexbox é “agnóstico de direção”, o que significa que seus layouts não são estruturados verticalmente ou horizontalmente. Isto o torna uma escolha melhor para projetar sites e aplicativos complicados que devem acomodar muitas mudanças de orientação da tela. Os layouts padrão do CSS são baseados em blocos e os layouts do Flexbox dependem do “flex-flow”. Novamente, CSS-Tricks oferece um desenho conciso que ilustra bem este conceito:
Os elementos dentro da caixa flexível são dispostos ao longo do eixo principal e do eixo transversal, onde cada elemento e propriedade dentro são projetados para flexionar e fluir com base no tamanho do recipiente flexível.
14. Dica WordPress: Não modifique diretamente arquivos de temas
A última das melhores práticas de CSS que vamos discutir aqui hoje é para usuários do WordPress, especificamente. Nunca é uma boa ideia modificar os arquivos do seu tema diretamente. Qualquer atualização do site poderia apagar essas mudanças ou quebrar o seu site. Não vale a pena o risco.
Ao invés disso, você pode usar a opção CSS Adicional no Personalizador do tema para fazer quaisquer mudanças que você quiser. Entretanto, você deve ter em mente que isto injetará o CSS na linha e o colocará diretamente na cabeça.
Se você quiser fazer apenas uma ou duas mudanças, esta pode ser uma opção viável, entretanto, qualquer coisa que você colocar na caixa CSS adicional ficará por aqui, mesmo se você fizer uma atualização de tema, uma atualização do site, ou mesmo se você mudar de tema.
Agora se modificações CSS mais robustas forem necessárias, é melhor adicioná-las a partir de uma folha de estilo CSS personalizada ou usando um tema infantil no qual você modifica diretamente o arquivo style.css para o child theme. Este método também é à prova de atualizações.
Resumo
Mergulhar de cabeça na criação de um CSS útil e preciso pode parecer muito para um verdadeiro novato, mas se dedicar um tempo para se educar sobre as melhores práticas pode poupar muito tempo, esforço e dor de cabeça mais tarde.
Esperamos que esta coleção de melhores práticas ajude a guiá-lo no caminho certo para a construção de sites funcionais, úteis e acessíveis para os próximos anos. Boa sorte!
Deixe um comentário