Práticas recomendadas de CSS: nove sinais de um CSS ruim

Publicados: 2020-12-16

CSS ou folhas de estilo em cascata - a linguagem que define a aparência e, às vezes, o comportamento de uma página da web. Muitas vezes é esquecido pelos desenvolvedores da web como uma linguagem “fácil” que não requer muita atenção. Memorizar algumas das propriedades mais comuns, o fluxo geral e pesquisar propriedades mais obscuras no Google é o caminho a percorrer. Mas, como os desenvolvedores mais experientes sabem, nenhuma linguagem merece ser esquecida, pois sempre há maneiras boas e ruins de fazer algo.

Com CSS, é muito fácil fazer as coisas da maneira errada, pois não há compilador que gere erros, não há avisos ou notificações de implementações ruins. Uma linguagem de programação como JavaScript tem uma tonelada de ferramentas que rastreiam a boa qualidade do código, algumas até jogam mensagens para o desenvolvedor de que uma determinada função não foi implementada da maneira certa.

Linguagens de programação

Nesta postagem relativamente curta, veremos alguns dos problemas comuns que os desenvolvedores enfrentam e como corrigi-los. Não se trata de detalhes de implementação específicos para um componente visual específico. Em vez disso, a lista se concentra em processos de pensamento, arquitetura e abordagens.

A complexidade CSS

CSS é difícil? Não! Definitivamente não, ele tem algumas regras estruturais muito básicas. Você tem seletores (classe, id, elemento), você tem propriedades e você tem escopo. É bem menos do que uma linguagem como C, Java ou PHP. Um desenvolvedor pode ter uma ideia completa em poucos minutos lendo e começando a estilizar. Claro, para saber a diferença entre margin e padding, você pode dar uma olhada no w3schools, mas quando usar isso vai exigir alguma experiência. Mas não é ciência de foguetes.

Agora, o que torna as coisas um pouco mais complexas são todas as maneiras como os seletores correm para sobrescrever o próximo e como uma propriedade afeta a outra (display: block vs display: inline, por exemplo). Em seguida, temos detalhes menores como redução de margem, empilhamento de índice z, propriedades de desempenho de GPU vs CPU, o modelo de caixa e propriedades de tipografia.

Além de tudo isso, novos recursos CSS que nem sempre são implementados da mesma forma em todos os navegadores, alguns nem mesmo são implementados e outros exigem propriedades diferentes.

Suporte do navegador para propriedades personalizadas relativamente novas

Se olharmos os dois parágrafos acima, veremos os dois estágios principais que os desenvolvedores front-end atingem quando trabalham com CSS - um é o “ Ah, isso é tudo? ”E a segunda é“ Oh merda, não foi só isso ”. Isso é o que significa “Complexidade CSS”

Existem muitas pequenas coisas interligadas que são difíceis de aumentar. Se você construir apenas um componente, é fácil - você estiliza tudo o que vê e funciona. Mas coloque esse único componente em um aplicativo maior e estilos adicionais serão aplicados. Você pode acabar com a mesma classe de outra coisa (como .button) e seus estilos serão aplicados em todo o aplicativo, quebrando tudo. É estressante!

CSS do WordPress: Guia básico para iniciantes

Como escrever CSS: Combatendo sua complexidade

Existem algumas soluções que surgiram por pessoas inteligentes, uma visão geral seria:

  • Convenções de nomenclatura CSS, como BEM, SMACSS e outras, que definem regras de nomes de classes que reduziriam a possibilidade de conflitos.
  • CSS em JS é um método mais novo que praticamente permite escrever componentes CSS em arquivos JS (parece ruim, parece ruim, mas faz algum sentido, pelo menos). Principalmente válido com React, Vue e outros.
  • Módulos CSS é uma abordagem mais sensata para CSS em JS para alguém que acaba com todos os estilos em um arquivo. Os Módulos CSS encapsulam os estilos de cada componente para que não possam vazar para outros componentes, tornando a reutilização muito mais fácil. Também reduz muito o estresse!

O primeiro - Convenções de Nomenclatura é provavelmente o mais difícil de implementar, pois não possui ferramentas para ajudá-lo. Cabe a você, como desenvolvedor, entender e aplicar a convenção. Você ainda tem que pensar nos nomes das classes, eles ainda não devem colidir e então você tem que fazer toda a equipe segui-los. Bem difícil!

CSS em módulos JS e CSS são correções de implementação. Eles alteram a saída do código como um todo, o que praticamente impossibilita o vazamento de estilos. Mas eles exigem pensamento e configuração de construção completamente diferentes, algo que nem sempre é possível ou desejado.

enfie tudo em um só lugar

O melhor conselho aqui seria: Estude as convenções de nomenclatura mais comuns e bem-sucedidas, use aquela que se encaixa nos padrões de codificação de sua empresa ou ecossistema. Entenda a separação de componentes e comece a pensar em termos de escopo e unidades singulares que criam um grande aplicativo. Não é um grande aplicativo desde o início, seria impossível de gerenciar.

Se você estiver trabalhando em uma pilha que inclui uma biblioteca como React ou uma estrutura como Vue, procure ferramentas adicionais que permitem gerenciar seus estilos com elas. Para qualquer desenvolvedor CSS de nível iniciante a intermediário, eles seriam uma grande ajuda! E você pode nunca querer abandoná-los, a menos que algo melhor apareça em seu caminho.

Fique de olho nas novas ferramentas! Eles nos impedem de lutar contra problemas que a comunidade de desenvolvedores já encontrou, corrigiu e forneceu uma maneira de lidar com eles.

Agora que descrevemos o que significa a complexidade do CSS e algumas dicas iniciais sobre como combatê-la, vamos mergulhar em uma visão geral mais detalhada e fornecer exemplos diretos.

Dicas de design de sites: como intensificar seu jogo em web design

Nove sinais de um CSS ruim

Essa lista definitivamente não está completa, nem por um longo quilômetro. Infelizmente, você enfrentará inúmeros outros problemas e, com sorte, encontrará soluções diretas para um problema específico em sites como Stackoverflow.
No entanto, se você quiser melhorar seu jogo, ao consertar um problema com algumas linhas de css, você precisa entender o que eles fazem. Por que você teve que mudar sua marcação, e por que você teve que mudar alguns seletores, propriedades?

Margens agem de forma estranha

Um problema comum que os desenvolvedores enfrentam é quando dois elementos não somam suas margens (superior / inferior). Por exemplo, temos dois elementos <p> com margem: 20px 0 ;. O espaço total entre eles é 20px, não 40. Isso se deve ao colapso da margem. Exceto se os elementos flutuam ou estão absolutamente posicionados. Este “Exceto” está em quase todos os lugares para quase todas as definições.

Índice Z: 9999999 e ainda não está no topo do índice Z: 1

Em primeiro lugar, raramente há necessidade de escrever índices z tão altos. Eu até vi valores como 99999999999999 ou mais. Primeiro, o valor máximo do z-index é 2147483647, portanto, qualquer coisa acima é inútil. Em segundo lugar, não funciona assim. Quais elementos estão no topo é definido pelo contexto de empilhamento, não apenas o valor do z-index. Veja o gráfico abaixo:

como o contexto de empilhamento funciona

Não animando as propriedades certas

É uma pergunta bastante simples, mas alguns desenvolvedores têm dificuldades quando se trata de animações e da abordagem a ser adotada. Primeiro, o que pode ser animado? Qualquer coisa que possa ter um valor inicial, um valor final e qualquer coisa intermediária. A opacidade é uma propriedade, você pode começar de 0, terminar em 1 e adicionar etapas infinitas entre como 0,3, 0,6758, 0,9875 etc. Você não pode animar a "exibição" porque não há etapas intermediárias entre inline e grade.

Animações Ineficientes

O motivo mais comum para FPS ruim em animações é devido às propriedades erradas sendo animadas. Se você alterar a propriedade “esquerda” de um elemento absoluto, estará utilizando a CPU para calcular. No entanto, se você usar a transformação, será a GPU. E a GPU, como todos sabemos, é melhor para fazer gráficos.

Comparação entre animações de GPU e CPU em um navegador

Mas como você animaria a sombra, quando ela não tem alternativa como esquerda / transformação? Bem, anime a opacidade! Possui dois elementos, um com início, estado e outro com estado final. Em seguida, esmaecer o início e o fim. Isso faria com que parecesse que a sombra se expande, onde, na verdade, ela apenas desaparece.

NÃO anime elementos que afetam o layout, se possível. Os cálculos de layout são caros e uma CPU pode fazer apenas uma quantidade limitada de cálculos. Freqüentemente, menos de um a cada 16 ms, o que resultará em FPS abaixo de 60.

Seletores muito profundos

O que é um modificador? Uma classe que você pode adicionar a outra classe e substituir algumas de suas propriedades. Exemplo: .button tem cor: vermelho. .button-primary, tem a cor: azul. Portanto, ao adicionar .button-primary a .button, você deseja obter uma cor azul. Mole-mole. Embora nem sempre seja tão fácil. E nem sempre é um componente assim.

Às vezes, queremos sobrescrever um componente filho de outro componente em uma página específica. Portanto, terminamos com algo assim: .page-name .section-name .component-1 .component-2 {…} Já com quatro níveis de profundidade. Mas o que acontece é que podemos simplesmente fazer .page-name .componen-2 {…}. Quanto mais curto, melhor! Porque se acontecer de você ter que sobrescrever esse novo estilo por algum motivo, não terá que ir 5 níveis de profundidade, depois 6 e mais.

Os seletores profundos são assustadores e as pessoas acabam usando! Important. ! important deve ser usado quando você deseja sobrescrever estilos embutidos sobre os quais você não tem controle. Caso contrário, é uma bandeira vermelha que você não está fazendo algo certo.

Arquivo muito grande

Agora, é claro, para uma grande aplicação, haveria muitos estilos, e isso é completamente compreensível. Mas é sempre tão grande? Uma maneira ruim de estender classes no SASS (por meio de mixins) geraria grandes cadeias de seletores, que demoram alguns segundos para rolar para ver todas. Uma extensão adequada reduziria muito esse arquivo. Pode até dobrar o tamanho.

Bundling-Assets-out-of-Control-Is-Impactful-to-Speed

Estruturas incluídas, das quais apenas algumas propriedades estão em uso, também são um motivo comum para arquivos grandes. Agrupe bootstrap / Foundation, font-awesome, animate.css e alguns outros frameworks / bibliotecas semelhantes e você acaba com um arquivo enorme do qual você usa cerca de 2%. Limpe, mantenha arrumado e use apenas o que for realmente necessário. Muitas vezes nem mesmo é necessário um framework.

Framework quando não é necessário

Bootstrap, Foundation, UIKit e todos os outros frameworks são ótimos! Eles resolvem um problema real e são extremamente valiosos para a comunidade de desenvolvimento web. Não há necessidade de saber HTML ou CSS tão bem para criar painéis e sites. Mas afaste-se desse caso, comece a escrever algum CSS e você terá alguns problemas.

Best-CSS-Frameworks

  • Você tem que entender corretamente como construí-los e como incluí-los
  • Você tem que ler sua documentação para encontrar as configurações personalizadas e mixins que eles fornecem.
  • Você deve seguir a marcação deles e ensinar sua equipe a fazer isso.
  • Você deve realmente entender como estender e estilizar para criar uma vista única.

Incluí-los corretamente significa que você usa apenas o que precisa. Para que essa estrutura o ajude, em vez de proibi-lo de criar qualquer coisa personalizada, você precisa saber que seu funcionamento interno é melhor do que a média. E para obter qualquer design personalizado, você terá que modificar as configurações e propriedades. E então escreva algum CSS customizado. E esse CSS personalizado para sobrescrever tudo o que a estrutura fornecer.

Portanto, se não houver necessidade real de tal estrutura CSS, mas ainda houver uma e ela não tiver sido utilizada corretamente, isso é um sinal de alerta de que algo está errado. E quando você começar uma vez com ele, provavelmente vai acabar usando-o até o final do ciclo de vida do projeto. Portanto, é uma decisão importante.

Não permitindo que o conteúdo defina o tamanho

Este é mais um problema de nível iniciante, mas é muito comum. Você deve dar ao conteúdo a liberdade que ele merece.

Por exemplo, você não deseja definir a propriedade de largura do site para 1200 px. Você deseja definir a largura máxima para 1200 px. Dessa forma, a janela de visualização permitirá que seu site continue responsivo.

Então, um campo de entrada não deve ter 40px de altura, deve ter preenchimento 1em. Agora, o tamanho da fonte, o conteúdo é o que define o tamanho. E se o conteúdo interno crescer, o elemento não quebrará.

Essa maneira de pensar ao definir tamanhos continua importante em toda a aplicação. E cada propriedade tem que considerar isso. O ideal é não definir% para largura na área de conteúdo, porque você também terá que escrever consultas de mídia.

Content-Define-Size

Se você tivesse largura máxima, quando seu navegador encolher abaixo dessa largura máxima, o conteúdo irá preencher a largura do navegador e, em seguida, encolher normalmente. Caso contrário, você teria que escrever uma consulta de mídia para esse tamanho. E depois para qualquer outro tamanho personalizado escrito no site. Isso é complexidade adicionada devido à abordagem inadequada. Quase o mesmo que todos os outros pontos que já discutimos.

Hacks de JavaScript

JavaScript pode fazer maravilhas! Mas nem sempre é necessário. Você pode fazer muito apenas com CSS que seja bem suportado, não requeira funcionalidade (que é melhor testada automaticamente depois) e não requer que seus outros membros FE conheçam JS também.

Claro, há a funcionalidade de alternância padrão, onde você pode usar uma caixa de seleção para alterar os estilos quando: marcada, há a sobreposição de fundo que pode ser facilmente acionada e há propriedades como contador para criar mais do que listas <ol> simples .

O conselho aqui é procurar soluções CSS primeiro. Digamos que você queira construir um pop-up. Ele aparece no meio (posição: fixo). Então você deseja fechá-lo a partir do ícone [X] ou ao clicar ao redor dele. Em JS, você precisaria escrever eventos que acionariam qualquer coisa, exceto o conteúdo pop-up. Mas ainda dispara no [X] que está no conteúdo popup.

Em vez disso, no CSS, você pode simplesmente escrever outro <div> que tenha 100vw, tamanho 100vh e índice z logo abaixo do pop-up. Em seguida, você pode simplesmente direcionar esse div em JS, que é uma linha única.

Outro exemplo - você quer um botão que pode colocar no conteúdo, o que irá “expandir” qualquer conteúdo que o segue. Simples com CSS, um pouco mais complexo com JS. Com CSS, você pode fazer algo assim:

 Label.button - estiliza o botão visualmente.
 Entrada: not (: verificado) ~ * {display: none} - oculta tudo depois disso no mesmo contêiner.

Aquele bit “no mesmo container”, você precisa de uma lógica customizada em JS. Você também precisa selecionar todos os elementos, o que requer percorrer a árvore DOM. E, em seguida, aplique estilos CSS a eles, o que acabaria na tag style = ””, que por sua vez exigiria! Important se por algum motivo você tiver que abordá-los. Em CSS, felizmente, é extremamente simples.

O caminho para se tornar um bom web designer

Conclusão

Como você pode ver, esses são poucos problemas comuns. Para cobrir todos eles, seria necessário um livro. Mas, com sorte, eles fornecerão um bom ponto de partida e o lembrarão de pensar sobre qualquer problema potencial que possa surgir devido à abordagem errada. Localizar esses problemas exige muita experiência e muita leitura. E se você chegou à conclusão aqui, então você está no caminho certo com a leitura, agora é hora de praticar!

DevriX WordPress Development Retainers

Desenvolvimento de longo prazo, suporte e inovação para sua plataforma WordPress. DevriX oferece parceria técnica para PMEs e startups em ritmo acelerado. Construímos soluções WordPress e escalamos plataformas gerando até 20 milhões de visualizações de página por mês.

Vamos trabalhar.