0

7 dicas para escrever um CSS mais Sexy e Poderoso

Gustavo Lima
Gustavo Lima

#1. Não repita

sem repetição

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

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

não use 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

!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

pre-processadores css

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:

pre-processadoresExemplo de código Sass

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

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

comentarios

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.

0
0

Comentários (3)

1
Leandro Carvalho

Leandro Carvalho

08/10/2021 19:29

Muito legal esclareceu algumas duvidas que eu tinha sobre CSS.

1
E

Eliezer Nogueira

08/10/2021 17:32

Muito legal e produtivo. Inclusive, to buscando alguma forma pra aprender a usar pré-processadores CSS.

0
Gustavo Lima

Gustavo Lima

08/10/2021 16:02

Não se esqueçam de curtir o artigo.

Jovem negro em busca de uma oportunidade no mercado de TI.

Brasil