https://pedromartins.com.pt/2021/02/20/dicas-para-escrever-melhor-css/

Escrever código em CSS é super fácil e não tem o mesmo nível de complexidade do que programar em C++, Python, LISP, Haskell e já agora, porque não BrainFuck!? Certo!?

Errado!

A observação anterior faz sentido para pequenos projectos ou pequenos websites. Quando a escala aumenta e temos que produzir código para projectos de grande dimensão, devemos possuir conhecimentos básico sobre como escrever código CSS que seja de fácil manutenção e que possa crescer e acompanhar a evolução do projecto.

Ficam algumas dicas não ordenadas por relevância:

1. Não usem id’s

Utilizar id’s em CSS traz por inerência uma série de problemas.

  • Para começar, o problema da elevada especificidade. Um id traz consigo um valor de especificidade de 100. Para superar ou suplantar os estilos definidos por um id , uma só classe (especificidade 10) não é suficiente. Ou utilizamos o id em conjunto com uma classe ou temos que recorrer à utilização da declaração !important.
  • Um id não pode ser reutilizado – daí o nome id. Por conseguinte, os estilos definidos com base num id só podem ser aplicados a um único elemento. As classes podem ser reutilizadas. Logo, os estilos definidos numa classe podem ser utilizados em múltiplos elementos.
  • Por uma questão de consistência – e acreditem que consistência é fundamental quando se trabalha em equipas e projectos de grande dimensão -, devemos reservar o uso de id’s para seleccionar elementos através de Javascript (document.getElementById) e as classes para aplicar estilos a esses elementos. Pensem nisto como uma espécie de segregação de competências.

2. Nao usem estilos inline

Utilizar estilos inline traz o mesmo problema da utilização dos id’s com uma agravante: a sua especificidade é superior à dos id’s.

Já que no ponto 1. falámos de segregação de competências, é boa práctica reservar os estilos inline para aqueles que são injectados por via Javascript. Desta forma, ao inspeccionar o nosso código, ajuda-nos a saber logo qual a sua origem. Ainda no âmbito da segregação de competências e também por uma questão de boa práctica, adicionar os nossos estilos em ficheiros .css externos.

3. Não usem !important

Quando confrontados com problemas para aplicar um determinado estilo, não recorram à utilização da declaração !important. Na maioria dos casos, é apenas um problema de especificidade e deve ser resolvido nesse âmbito.
Para superar um estilo definido com !important só utilizando outro !important e rapidamente todo o código CSS vai ficar repleto de !important’s. Resultado? Um pesadelo!!!

4. Atribuam nomes expressivos

Conhecem a frase?

There are only two hard things in Computer Science: cache invalidation and naming things.

— Phil Karlton

Arranjar nomes expressivos e/ou significativos, é difícil mas fundamental e ajuda-nos a compreender melhor o contexto do que estamos a estilizar.

/* Má práctica */

a {
  color: orangered;
  text-decoration: none;
}


/* Boa práctica */

.link {
  color: orangered;
  text-decoration: none;
}

Outra dica e boa práctica relativamente à atribuição de nomes em CSS, é usar nomes separados por um hífen, em vez de utilizar nomenclatura camelCase.

/* Má práctica (camelCase) */

.navLink {
  color: orangered;
  margin-right: 1.5rem;
  text-decoration: none;
}


/* Boa páctica (palavras separadas por hífen) */

.nav-link {
  color: orangered;
  margin-right: 1.5rem;
  text-decoration: none;
}

5. Adoptem um padrão de arquitectura modular

Os padrões de arquitectura modular CSS são conjuntos de regras ou princípios, que ajudam a manter o código CSS bem estruturado, com baixa especificidade, com significado semântico e com espaco para escalabilidade – essencial em projectos dinâmicos e com bases de código de grande dimensão. Existem diferentes tipos de arquitecturas, BEM, SMACSS, OOCSS com princípios diferentes, mas com um objectivo comum: criar estrutura no que facilmente pode derrapar para o caos.

Por deformação profissional, uso uma arquitectura BEM, com algumas adaptações – afinal são princípios e não dogmas -, e só tenho a elogios a fazer.

Falar sobre estas metodologias está fora do âmbito deste post, mas abaixo fica um exemplo de utilização dos princípios BEM que nos permite ver a relação dos elementos entre si:

/* Má práctica */

<div class="card user">
  <img class="img" />
  <p class="name"> ... </>
</div>


/* Boa práctica (BEM) */

<div class="user card card--user">
  <img class="user-avatar" />
  <p class="user-name"> ... </>
</div>

6. Usem propriedades abreviadas

A vantagem de utilizar propriedades CSS no formato abreviado é que poupa-nos ao sofrimento de escrever mais linhas de código. Vejamos o exemplo abaixo:

/* Má práctica (Não abreviado) */

.thumbnail {
  background-color: #222;
  background-image: url("fooBar.png");
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center;
}


/* Boa práctica (Abreviado) */

.thumbnail {
  background: url("fooBar.png") #222 cover no-repeat center;
}

7. Sigam o princípio DRY

DRY é o acrónimo para ‘Don’t Repeat Yourself’ e é um princípio universal em programação. O objectivo é quando escrevemos código devemos fazê-lo evitando repetições. E sim, deve ser utilizado quando escrevemos CSS.

Vejamos um exemplo que não segue os princípios DRY:

/* Botão normal */

.btn {
  background-color: #10a5f5;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  padding: .75rem 1.5rem;
  text-align: center;
  text-transform: uppercase; 
  font-size: 1.6rem;
}


/* Botão de perigo */

.btn--kill {
  background-color: #df4759;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  padding: .75rem 1.5rem;
  text-align: center;
  text-transform: uppercase; 
  font-size: 1.6rem;
}


/* Botão desactivado */

.btn--disabled {
  background-color: #10a5f5;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  padding: .75rem 1.5rem;
  text-align: center;
  text-transform: uppercase; 
  font-size: 1.6rem;
  opacity: .5;
  pointer-events: none;
}

Restruturemos o código anterior com base nos princípios DRY e utilizando também conceitos BEM:

/* Botão normal */

.btn {
  background-color: #10a5f5;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  padding: .75rem 1.5rem;
  text-align: center;
  text-transform: uppercase; 
  font-size: 1.6rem;
}


/* Botão de perigo */

.btn--kill {
  background-color: #df4759;
}


/* Botão desactivado */

.btn--disabled {
  opacity: .5;
  pointer-events: none;
}

Com esta restruturação obtemos quase um redução de 50% no número de linhas de código.
Como é que utilizamos o código acima no nosso markup?

<div class="actions">
  <button class="btn">Botão Normal</button> 
  <button class="btn btn--kill">Botão de Perigo</button> 
  <button class="btn btn--disabled">Botão Desactivado</button> 
</div>

8. Comentem o vosso código

De um modo geral o código por si só é descritivo do que se passa. No entanto, sempre que existam razões pouco claras para a utilização de determinadas propriedades devemos comentar as razões que nos levaram a implementá-las para facilitar o entendimento de outro developer que as encontre e para prevenir efeitos secundários case alguém as remova porque pareciam redundantes.

.some-class {
  /* Porquê usar z-index com o valor 10??? */
  z-index: 10
}

9. Utilizem pré-processadores CSS

Não pretendo entrar em discussões sobre qual pré-processador CSS a utilizar, apenas enfatizar para que usem. Os 3 mais utilizados são: SASS, LESS e Stylus.

Quais as vantagens?

  • Utilização de variáveis: A possibilidade de usar variáveis é uma bóia de salvação sempre que é necessário efectuar uma alteração. Em vez de termos que percorrer o código e fazer essa alteração dezenas de vezes onde ela é utilizada, basta alterar o valor onde a variável é declarada.
  • Compilação num único ficheiro: Podemos separar os nossos estilos em diferentes ficheiros para segregar competências na fase de desenvolvimento e compilar todos esses ficheiros num único para produção.
  • Hierarquizar a estrutura: O facto de podermos escrever propriedades dentro de outras propriedades ajuda-nos a não repetir selectores e a manter uma estrutura hierarquizada que segue a mesma estrutura do nosso markup.
  • Podemos extender classes e usar mixins
  • Uso de funções: O pré-processador disponibiliza funções lógicas, matemáticas, de manipulação de côr, etc…

Se querem aperfeiçoar as vossas competências em escrever bom CSS e de forma profissional, sigam as dicas anteriores. Espero não me ter esquecido de nenhuma.

Share: