Tempo de leitura: 8 minutos
Uma das maiores dificuldades que desenvolvedores enfrentam é lidar com manutenção de códigos.
Para trabalhar de forma eficaz precisamos entender o código fonte primeiro. Este é o ponto em que percebemos imediatamente a importância do código limpo. Como desenvolvedores, devemos tentar escrever nosso código da maneira mais limpa possível.
E quando se trata de CSS devemos ter o mesmo cuidado. Há alguns pontos em particular que precisamos prestar bastante atenção ao escrever nosso CSS.
Neste post, vou compartilhar os pontos mais importantes na manutenção de códigos CSS. São 7 dicas poderosas que vão ajudar você a melhorar a qualidade do seu código CSS.
Quais as 7 dicas para escrever um CSS mais sexy e poderoso?
// #3. Não utilize estilos embutidos
// #7. Adicione comentários quando necessário
Que comecem os jogos!
#1. Não repita
Este é um fundamento no desenvolvimento de software e pode ser aplicado no CSS, ou em qualquer outra linguagem de programação.
Como podemos entender pelo termo “Não repita”, o objetivo é evitar ou reduzir a repetição, tanto quanto possível.
Por exemplo, podemos criar 3 classes CSS para 3 botões como este:
.primary-button {
background: blue;
color: white;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
.form-button {
background: green;
color: white;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
.cancel-button {
background: red;
color: white;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
Ou podemos usar o princípio “Não repita” escrevendo as regras comuns uma vez em uma classe adicional, e as diferentes regras, cada uma nas outras classes:
.button {
color: white;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
.primary-button {
background: blue;
}
.form-button {
background: green;
}
.cancel-button {
background: red;
}
Como podemos ver, quando você evita a repetição, diminui o número de linhas e melhora a legibilidade e até o desempenho do seu código.
#2. Nomeação
Nomear os selectores de CSS é outro ponto importante para escrever CSS com maior qualidade. O nome de um seletor deve ser auto-descritivo e legível …
// Nomeação ruim
.p {
// Regras
}
.myFirstForm {
// Regras
}
Normalmente, <p> é uma tag HTML e significa parágrafo. Acima, não podemos realmente entender o que é a classe p. Além disso, você deve evitar nomes como myFirstForm, e eu não aconselho o uso de camel case.
Em vez disso, busque usar termos declarativos (separados por um traço para vários nomes):
// Nomeação boa
.article-paragraph {
// Regras
}
.contact-form {
// Regras
}
Eu acho que os nomes fazem mais sentido agora. 🙂
Nomear algumas coisas na programação não é tão simples, mas existem várias convenções de nomenclatura que você pode usar em seu projeto.
O BEM (modificador de elemento de bloco) é um deles.
#3. Não utilize estilos embutidos
O uso de estilos embutidos é uma pauta que levanta debate entre os programadores.
Parte da comunidade levantam argumentos na web sobre evitar essa prática, e nunca usar estilos embutidos. Enquanto outros argumentam que o uso de estilos embutidos pode ser útil em alguns casos.
Eu sou da opinião que você não deve utilizar de estilos embutidos. E nas próximas linhas vou te apresentar os pontos que mostram porque você deve evitar essa prática.
Separação de códigos.
De acordo com o princípio da separação de códigos, design (CSS), conteúdo (HTML) e lógica (JavaScript) devem ser separados por razões como melhor legibilidade e manutenção.
A inclusão de regras CSS nas tags HTML quebra esta regra:
<div style=”font-size: 16px; color: red;”>Texto único!</div>
Devemos manter nossas regras de estilo em arquivos CSS externos.
Dificuldades na pesquisa.
Outro problema com o uso de estilos embutidos é que não podemos procurá-los. Portanto, quando precisamos alterar o estilo, normalmente procuramos seletores CSS do elemento HTML.
Por exemplo, vamos alterar o tamanho da fonte do texto em nossa página web. Para fazer isso, primeiro encontramos a parte específica no navegador em que a alteração é necessária, observando a estrutura HTML:
<div class=”text-bold”>Texto único</div>
Então precisamos encontrar o seletor, que é a classe de texto em negrito aqui. Por fim, vamos para essa classe e fazemos as alterações:
.text-bold {
font-size: 16px; // mudar a font-size para 14px
font-weight: bold;
}
Mas se as regras forem escritas em estilo embutido em vez de usar classes:
<div style=”font-size: 16px; font-weight: bold”>Texto único</div>
Mesmo se encontrarmos a tag HTML, não saberemos se existem outras regras de tamanho de fonte dentro do HTML ou não.
Como não há seletor usado, temos que percorrer todas as páginas HTML uma por uma, tentar encontrar as outras regras de tamanho de fonte e alterá-las também.
Não seria mais fácil com um seletor de CSS? Mas há algo ainda pior …
Problemas de especificidade / substituição.
Os estilos em linha têm a mais alta especificidade entre os selectores de CSS (quando não contamos Tags !importantes).
Considerando que estamos usando uma classe e um estilo embutido para um elemento:
.text-bold {
font-size: 16px;
font-weight: bold;
}
<div class=”text-bold” style=”font-size: 14px”>Texto único</div>
Aqui, o tamanho da fonte do texto será 14px, porque os estilos embutidos têm uma especificidade maior do que as classes CSS. Quando você faz uma alteração na classe:
.text-bold {
font-size: 20px;
font-weight: bold;
}
O tamanho da fonte ainda será 14px. Portanto, sua alteração na classe CSS não vai funcionar, o que fará com que você acabe dizendo:
“Ei, por que meu código CSS não está funcionando? Eu odeio CSS!”
e levar você a usar uma tag !important que faz a mágica:
.text-bold {
font-size: 20px !important;
font-weight: bold;
}
O que é um grande erro e nos leva ao próximo ponto…
#4. Evite a tag !Important
OK, seu CSS não estava funcionando como deveria e você o fez aplicando a tag !important.
O que acontece depois? A tag !Important tem a mais alta especificidade de todos os selectores de CSS.
Você está basicamente dizendo ao navegador para aplicar essa regra específica com a tag !Important sempre e sob quaisquer circunstâncias. Isso não é bom porque as regras CSS podem ser diferentes de um seletor para outro, do seletor pai para o filho.
A única maneira de substituir uma tag !important é usar outra tag !importante. E isso leva ao uso de tags cada vez mais de !importants.
Confie em mim, em breve o código do seu projeto estará cheio de tags !important, o que torna seu código CSS muito mais difícil de manter. Portanto, tente não usar.
#5. Use um pré-processador
Trabalhar com um pré-processador CSS como Sass ou LESS é muito útil em projetos maiores. Um pré-processador traz recursos adicionais ao nosso código CSS que normalmente não podemos fazer.
Por exemplo, podemos definir variáveis, funções e mixins, importar e exportar nossos arquivos CSS em outros arquivos CSS e escrever código CSS aninhado:
Um pré-processador tem sua própria sintaxe e, mais tarde, é traduzido para CSS padrão (em um arquivo CSS separado) porque os navegadores não entendem a sintaxe.
Eu gosto de trabalhar com Sass e o usei em vários projetos.
>> Pré-processadores CSS – O Guia definitivo
#6. Use taquigrafia
Algumas das propriedades CSS, como preenchimentos, margens, fontes e bordas, podem ser escritas de maneira muito mais simples por meio de taquigrafia. O uso de taquigrafia ajuda a reduzir as linhas de regras.
Portanto, sem atalhos, uma classe CSS ficaria assim:
.article-container {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 15px;
margin-right: 15px;
border-width: 1px;
border-style: solid;
border-color: black;
}
Com a taquigrafia fica assim:
.article-container {
padding: 10px 15px 20px 15px;
margin: 10px 15px;
border: 1px solid black;
}
#7. Adicione comentários quando necessário
Normalmente, o código de qualidade não precisa de comentários porque já deve ser claro e auto-descritivo. Mas, ainda assim, em alguns casos, talvez seja necessário escrever explicações adicionais.
// Seus comentários
.example-class {
// suas regras
}
Portanto, quando você achar que algumas partes do código não estão claras, não tenha medo de adicionar comentários (mas, por outro lado, certifique-se de não exagerar :)).
Como desenvolvedor front-end com alguns anos de experiência, essas são as dicas mais importantes que posso sugerir para melhorar suas habilidades de CSS.
Se você tiver alguma dúvida ou acha que também há outras dicas para escrever um CSS melhor, não hesite em deixar seu comentário abaixo.
Conclusão das dicas de CSS
Gostou das dicas para deixar o seu CSS mais Sexy e poderoso?
O próximo passo que você deve tomar para se aprofundar é construir comigo projetos reais, pois além de muitos anos no mercado de desenvolvimento Web, sou professor com vasta experiência para te conduzir nesta jornada e tirar todas as suas dúvidas.
E não sou eu que digo, são os mais de 14.000 alunos capacitados por mim na Danki Code, por isso sei bem do que eu estou falando.
A melhor forma de você começar a desenvolver projetos reais é adquirindo o Pacote Full-Stack. Com ele você vai desenvolver os projetos mais incríveis e cobiçados do mercado.
