Clean Code no CSS

Introdução

Desenvolver habilidades em CSS pode ser uma tarefa relativamente simples, no entanto, criar folhas de estilo de alta qualidade requer um nível de complexidade maior. Com isso em mente, gostaria de compartilhar alguns truques que certamente contribuirão para o aprimoramento dos seus projetos. E para começar vamos analisar o seguinte código.

.btn-blue{
    background-color: blue;
    border: 0.5rem solid blue;
    border-radius: 0.8em;
    color: #fff;
    display: inline-block;
    font-size: 1em;
    padding: 0.65em 1em;
}

.btn-orange{
    background-color: crimson;
    border: 0.5rem solid crimson;
    border-radius: 0.8em;
    color: #fff;
    display: inline-block;
    font-size: 1em;
    padding: 0.65em 1em;
}

Ao analisarmos o código acima, notamos várias repetições que podem ser melhoradas para resumir eficientemente as características desse componente. Um exemplo é a aplicação do chamado GLC (Global, Local class). Podemos criar uma classe global chamada “btn” para representá-lo de forma concisa:

.btn{
  border-radius: 0.8em;
  border-style: solid;
  border-width: 0.5em;
  color: #fff;
  display: inline-block;
  font-size: 1em;
  padding: 0.65em 1em;
}

Agora que isolamos nossa classe global, podemos focar na nossa classe local. Ao contrário da classe global, a classe local conterá características específicas do nosso componente. Vamos começar a colocar a mão na massa, ou melhor, no código.

.btn_blue{
    background-color: blue;
    border-color: blue;
}

.btn_crimson{
    background-color: crimson;
    border-color: crimson;
}

Se você observou bem nossa refatoração, conseguimos diminuir bastante repetições não é mesmo?! Bom agora vamos aplicar uma feature nova nosso CSS que irá deixar ele mais elegante e de fácil trabalho em uma linha de fluxo, se você já trabalha com pré processadores como SASS, certamente já ouviu falar sobre nesting, o mais legal é que agora podemos usar no CSS puro. Vamos ao nosso código.

.btn{
  border-radius: 0.8em;
  border-style: solid;
  border-width: 0.5em;
  color: #fff;
  display: inline-block;
  font-size: 1em;
  padding: 0.65em 1em;
  &_blue{
      background-color: blue;
      border-color: blue;
  }
  &_crimson{
      background-color: crimson;
      border-color: crimson;
  }
}

Agora temos um código limpo, mas essa é apenas uma das primeiras etapas de refatoração. No próximo artigo, abordaremos a construção de cards de forma clara e semântica. Espero contar com a sua presença. Um grande abraço!

Compartilhe essa matéria com seus amigos