Como deixar seu CSS Saudável

Por que css é tão difícil de manter?

  • Dificuldade em mover elementos sem quebrar os estilos da página
  • Complexidade de manutenção
  • Impossível reaproveitar algum estilo para outro projeto
  • Cada desenvolvedor cria classes CSS de maneira diferente
  • Geralmente o CSS se torna gigante ‘macarrao.css’
  • Existe muita dependência de tags

Como resolver?

Não existe solução específica ou mesmo algo mágico, mas existem algumas metodologias, como OOCSS, SMACSS, BEM, ITCSS, RCSS entre outras, que podem nos ajudar a melhorar e organizar nosso css.

Afinal, qual usar?

A metodologia escolhida vai variar de acordo com o projeto, equipe e padrão de cada empresa. Usaremos como exemplo a metodologia ‘BEM’

B => Bloco

E => Elemento

M => Modificador

Belezura! Mas, o que o BEM faz?

É uma abordagem baseada em componentes para desenvolvimento web. A ideia por trás disso é dividir a interface do usuário em blocos independentes.

Parece confuso, certo? Mas vou descomplicar!

Vamos começar pelo bloco, repare na imagem abaixo, que todos os elementos se encontram dentro dele. Conforme o exemplo da figura todo o menu é um bloco, e toda a parte que envolve o login é outo bloco.

Os elementos são partes que formam o bloco.

Já o modificador é o estado do elemento. Será usado quando precisar modificar o estilo desse elemento.

Existe um padrão de nomenclatura para usar o BEM, essa nomenclatura ajudará a escrever as classes para nossos elemento HTML de forma que podemos reaproveitar nosso CSS.

Pegando como exemplo a figura acima, usaremos o menu como base, e assim, utilizar da seguinte forma:

Sim, eu sei que parece não fazer sentido? Mas vai melhorar. Abaixo, farei alguns exemplos, um do modo errado e outros de um jeito que conseguiremos reutilizar e fazer uma manutenção muito fácil!

1# Mode Errado

Parece tudo lindo, mas existe um grande problema para manutenção desse CSS. Já imaginou precisar trocar a tag do seu titulo de h1 por h2?Simplesmente vai quebrar seu layout, precisando abrir o css e também atualizá-lo, isso é péssimo para manutenções futuras.

Como citado no começo deste post, não podemos ter dependência de tags no css. Existe um codepen para ver o resulto melhor e ir testando nesse link

Vamos seguir o jogo.

2# Mode Quase Certo

Ok, agora que temos classe em toda nossa tag do componente e no css não vai acontecer mais dependência de tags. Por que raios ainda não está 100% correto?

Simples, ele não está 100% reaproveitado.

Já que precisamos reaproveitar todo o css ou até mesmo o html, não podemos fixar um tamanho nele como estamos fazendo acima na class .card colocando o seu width em 290px, se precisar colocar um card maior como 50% da tela precisamos novamente mexer no css desse componente, e isso não é legal.

link para o codepen

3# Mode Certo

Agora está começando a ficar legal, só precisamos envolver nosso componente em um container (bloco), como no exemplo acima, criamos uma div com a classe l-card apenas para manipular o tamanho do width, delegando apenas uma única responsabilidade.

Beleza!!! Mas agora me mostra como usar o tal modificador!

Segue abaixo:

Aparentemente na estrutura não modificamos nada, mas preste atenção na linha 6 do HTML, adicionamos uma classe chamada ‘card__content — disable” ela vai ser responsável apenas pela troca de cor de todo o content que envolve o título e descrição, simples assim:

Segue novamente o link do codepen

Então é isso, se você é uma daquelas pessoas que gostam de slides. Existe uma versão desse post, aqui.

Obrigado!!!