CSS e 5 Erros Que Você Deve Evitar

Ontem eu estava trabalhando com uma pequena startup e sua divisão front-end. O objetivo principal era fixar alguns bugs e problemas de cross-browser, também para tornar o site inteiro receptivo e mobile-friendly. Como este não era o caso de um grande site, eu pensei que seria fácil e rápido para ser feito. Linda ilusão.

Uma breve olhada no CSS foi como um soco na cara. Era uma bagunça. Isso não se concretizaria no prazo de algumas semanas. Nesse post eu quero compartilhar com vocês alguns erros para evitar caso você deseje manter o CSS em forma.

Especificidade CSS

Vamos levar uma das coisas mais negligenciadas no CSS por iniciantes e pessoas que pensam que saber CSS e escrever CSS bem é a mesma coisa. Infelizmente, como em muitas outras coisas nessa vida isso não é verdade. Todo mundo pode escrever um poema ou livro, mas eles não terão a mesma qualidade. Escrever um bom CSS não é fácil. Especificidade é um fator crucial para ser observado ao trabalhar em qualquer projeto, porque ele funciona como um boomerang. Se você pegar um atalho no começo, você pode se encontrar em uma situação desordenada mais tarde.

Quanto maior a especificidade em seu CSS, maior será o esforço do seu lado para substituir certas regras. Isso é algo que eu chamo de seletores sobre-dimensionados. Você provavelmente já experimentou isso por conta própria. É qualquer situação em que você tem uma regra CSS ou um conjunto de regras para algum elemento HTML e em vez de usar um ou dois seletores se tem quatro, cinco ou mais seletores descendentes em uma única linha. A mesma coisa é quando você usa um elemento HTML com uma classe seletora anexada.

CSS RUIM:

CSS BOM:

Alguns de vocês podem argumentar que, para manter a especificidade do CSS o mais baixa possível, você terá que desorganizar sua marcação com maior quantidade de classes. Você está certo. No entanto, o objetivo do atributo classe é permitir estilização do elemento HTML, então você basicamente deve seguir as recomendações dada pelas pessoas que as inventaram. Talvez seja de um jeito extremo, mas e se funcionar? Pense sobre isso… É melhor criar mais classes ou utilizar 17 seletores?

CSS Id’s

Usar id’s em CSS é frequentemente discutido e você pode encontrar algumas perguntas sobre este tópico no Stackoverflow. Mesmo que não exista uma regra inalterável que diga: “Mantenha id’s distantes de CSS”, eu sugiro que você faça isso. O objetivo principal dos atributos id’s são especificar um único id para um elemento. Em outras palavras, ele é usado na marcação apenas uma vez, não mais. Seu objetivo no seu documento CSS deve ser exatamente o oposto. Você deve apontar para a modularidade, ou seja, criar classes e regras que pode ser repetido muitas vezes uma e outra vez sem modificações.

Se você estiver usando ids, isso é impossível. Todas as regras que você usa através do seletor id serão aplicadas apenas uma vez por página. Você já ouviu que aplicar estilos via id é mais rápido do que nas classes? Eu também. Você viu a diferença? Era cerca de 13 (!) Milissegundos. Essa diferença é grande suficiente para você? Um forte argumento contra o uso de seletores id no CSS é que eles são o início de uma espiral descendente em especificidade ou, para ser mais criativo, guerras de especificidade.

CSS RUIM:

CSS BOM:

A próxima vez que você quiser substituir o seletor você precisará usar outro id com qualquer elemento seletor, classe seletora ou… dois seletores id (não tente esse no seu projeto por favor!). Espere um minuto, você também pode usar a declaração !important. Não, não, não. Vamos deixar mais fácil esquecer o seletor id completamente quando você trabalhar com CSS. Mantenha-o apenas como um gancho para JavaScript.

Falta de Organização

Isto é um problema, eu vejo quando trabalho com grandes times de desenvolvedores que trabalham sem diretrizes ou uma organização que devem seguir. Em caso de equipes com uma única pessoa, não é um problema. Contudo, a aplicação de um estilo coerente aos seus documentos CSS é sempre uma boa ideia. Estruturar CSS pode significar muitas coisas. Por exemplo, isso pode ser algo “pequeno” como classificar as propriedades em uma certa ordem. Por outro lado, também pode significar a organização de folhas inteiras de maneira específica.

CSS do csswizardry:

O grau e o tamanho em que você quer assumir dependem de você. Contudo, não importa quão pequeno ou grandes passos você fará, só será um passo à frente por causa da coerência estrutural (isso é importante) que ajudará você a entender e orientar seus projetos mais antigos, até mesmo se você esquecer do que era. Então, tenha coragem, experimente e veja o que funciona para você.

Vários Estilos de Codificação

Mais uma coisa comum em grandes times de desenvolvedores são vários estilos de código. De indentação diferente para ordem das propriedades para ziguezaguear com partes de folhas de estilo. Eu sei que coisas como se você indentar seu código com dois espaços ou quatro é apenas uma pequeno detalhe, mas são os detalhes onde todo problema começa antes de crescer e se tornar algo maior. Somente observando esses pequenos problemas, podemos preceder os problemas antes de se tornarem mais sérios.

Empresas de tecnologia, e outras também, esforçar-se para criar uma boa cultura para seus funcionários. O que eles também devem fazer é considerar criar uma cultura ou um ambiente consistente quando se trata de desenvolvimento e programação. É ótimo ter um time cheio de incríveis desenvolvedores trabalhando juntos e é melhor se eles seguem o mesmo estilo. Se você precisar de alguma inspiração, dê uma olhada nas guias de estilo do GitHub para CSS e JavaScript ou o guia de código feito pelo @mdo.

Comentários Pobres

Em muitas situações, os comentários geralmente são mal utilizados ou não são usados. Que pena! Comentários podem ser um bom caminho para por ordem em seu código e ajudar seus colegas entender de forma rápida. Outro exemplo dos comentários utilizados como um bom caminho é incluir uma meta-informação como autor, contato, data, versão e licença no início do documento. Não se trata de ser narcisista. Com essas informações inclusas, todos que trabalham com o código saberão quem é o autor e onde devem procurar ajuda ou documentação mais detalhada.

Contudo, comentários podem ser como uma faca de dois gumes, então pense duas vezes sobre porque você precisa utiliza-los antes de escrever qualquer coisa. Sua intenção não deve ser escrever comentários sobre cada pequeno trecho de código. Use comentários quando pode haver problemas com a compreensão do código e qual é a sua função. Se você estiver preocupado com o tamanho do arquivo CSS, use a versão de desenvolvimento e de produção. A diferença é que a versão de produção é minificada, então, sem comentários.

Resumo

Há muitas maneiras como o CSS pode quebrar seu projeto. Essas cinco que eu compartilhei com vocês hoje são as que muitas vezes vejo ao trabalhar com clientes. Estes também são relativamente fáceis de encontrar e consertar e podem ter um impacto significativo no futuro. Eu esperto que isso possa ajudar você, sua empresa e seus clientes a trabalharem mais rápido, mais fácil e oferecer melhores resultados. Que outras coisas podemos evitar no CSS?

Autor: Alex Devero.
Original: “CSS and 5 mistakes to avoid”.