Como organizar CSS: código mais limpo, flexível e reaproveitável com Flexbox, Grid e mobile-first

Muitas pessoas desenvolvedoras aprendem boas práticas de programação desde cedo: encapsulamento, nomes claros para variáveis e métodos, orientação a objetos e outros conceitos clássicos são frequentemente dominados.

No entanto, ainda é comum ver profissionais experientes com dificuldades ao criar um código front-end de qualidade. Escrever um CSS limpo, flexível e reaproveitável pode ser mais desafiador do que parece. 

o geral, escrever um bom código JavaScript tende a ser mais direto, pois os conceitos de programação, como encapsulamento e orientação a objetos, são semelhantes aos de outras linguagens. 

Já quando falamos de HTML e CSS, surge a dúvida: como organizar CSS de forma reutilizável?

A seguir, veja as melhores práticas para lidar com especificidade CSS, uso de unidades relativas CSS, estratégias mobile-first e recursos como Flexbox, Grid, media queries e até container queries. 

Como evitar sobrescrever regras e melhorar a especificidade CSS 

Você já passou por isso: coloca um float:left num seletor e depois precisa limpá-lo com float:none num caso particular. Ou ainda reescrever um width:auto e coisas do tipo. Péssima prática. 

Além de te fazer escrever a mesma propriedade duas vezes, não faz uso dos padrões do navegador (no caso, que todo float já é none). Evite isso invertendo seus seletores: deixe só os elementos que realmente precisa flutuar com float:left e os demais herdam o valor padrão none e pronto. 

Um cenário que vejo isso acontecer muito é ao adaptar sites pra telas menores com media queries. Na tela grande, você flutua elementos pra todo lado mas num celular pequeno decide empilhar os elementos e tirar o float: 

 CSS  

/* desktop */  
 .botao-magico { float: right; } 
/* mobile */  
@media (max-width: 600px) {  
.botao-magico {  
     float: none;  
}  
}

Nesse caso de media queries, aliás, isso só aconteceu porque usamos a estratégia de escrever os estilos do desktop primeiro e depois sobrescrever com os estilos pra dispositivos menores.

Chamam essa estratégia de desktop-first e esse exemplo é um ótimo argumento pra você não fazer isso e preferir mobile-first no seu CSS: 

 CSS  

/* mobile */  
 /* nada aqui! o padrão é float:none */ 
/* desktop */  
@media (min-width: 600px) { 
.botao-magico {  
      float: right;  
}  
}

Por que usar classes para organizar CSS e evitar IDs 

IDs são pouco flexíveis: cada ID deve aparecer apenas uma vez na página e um elemento não pode ter mais de um ID. Por isso, IDs dificultam o reaproveitamento de estilos no CSS. 

Você deveria usar classes sempre no seu CSS. Isso te permite aplicar o mesmo estilo em mais de um elemento diferente sem replicar regras. Seu código fica mais curto e mais limpo. 

Classes CSS possibilitam um reaproveitamento de estilos semelhante ao conceito de herança presente em linguagens orientadas a objetos. Crie uma hierarquia de classes pra reaproveitar estilos comuns mesmo em elementos diferentes. 

Por exemplo: você tem dois elementos na página (.menu e .noticias) que têm funções e visuais diferentes. Mas os dois seguem a base visual do site que é ter fundo cinza, com borda redonda e uma sombra. Ao invés de copiar as propriedades, crie uma nova classe base pra esses elementos: 

 HTML  

<div class="box menu">...</div> <div class="box noticias"></div> 

 CSS  

.box {  
background: #ccc;  
border-radius: 5px; 
box-shadow: 2px 2px 2px black;  
}

Prefira criar essa classe nova .box que escrever o CSS usando as classes dos outros dois elementos .menu, .noticias { ... }. O dia que um terceiro box surgir, é só aplicar a classe, sem mexer no CSS. 

Entenda a importância da especificidade CSS para manter seu código organizado 

Falando em classes e sobrescrever regras, a coisa fica pior ainda com as regras de especificidade do CSS. Seletor de ID tem precedência ao de classe, que tem precedência ao de tagname. 

Outro motivo pra você evitar IDs no CSS é que você não pode sobrescrever suas propriedades com suas classes genéricas reaproveitáveis. Precisaria de outro ID pra sobrescrever um seletor de ID. 

Não brigue com a especificidade. Mantenha a especificidade dos seus seletores no mesmo nível usando classes sempre pra estilizar. São mais fáceis de compor. E jamais use !important pra forçar um estilo. 

Por que evitar números mágicos e usar unidades relativas CSS 

Toda vez que você escreve um margin-top:37px ou um width:381px um bebê foca morre. Evite números mágicos no seu CSS que são calculados arbitrariamente e certamente quebrarão se o texto for um pouquinho maior ou se o seu menu tiver uma entrada a mais. 

Pior ainda aquele número mágico pra alinhar algo (tipo um top:-1px) que certamente está levando em conta a renderização num certo browser e vai quebrar em outro navegador ou se o ícone mudar. Isso faz seu CSS ser pouco reaproveitável e exige manutenção constante.

Quer alinhar um ícone com texto? Aprenda a usar o vertical-align:middle (mesmo ele não funcionando do jeito que você pensa que funciona). 

Como usar unidades relativas em CSS: em, rem e % para layouts flexíveis 

Números mágicos podem ser evitados em muitos casos usando unidades relativas como porcentagens.

Se você tem uma página de 940px de largura e precisa dividir em 5 colunas, não escreva width:188px porque você nunca vai lembrar da onde saiu esse valor. Prefira width:20% que mostra de maneira mais óbvia que é 1/5 do página. 

E, claro, se puder, faça todas as suas unidades de layout com porcentagens. Isso vai fazer seu design ser flexível e não depender do tamanho do navegador. A Web é uma mídia elástica e confinar sua página a pixels estáticos é transformar a Web em uma mídia mais limitadas como a impressa. 

Para elementos tipográficos ou afetados pela tipografia, use em como medida flexível. Além disso, o Flexbox e o Grid layout são ferramentas poderosas para criar layouts flexíveis sem recorrer a "números mágicos". Conheça nosso curso Praticando CSS: Grid e Flexbox. 

Como desacoplar CSS do HTML usando classes 

Escrever o nome tag no meio do CSS faz com que seu estilo fique acoplado à estrutura do HTML. Se o HTML muda, seu estilo quebra. Podemos evitar isso criando mais classes e diminuindo o acoplamento entre HTML e CSS. 

Se você tem um menu como uma lista cheia de itens, não use .menu li no CSS. Prefira criar uma classe específica .menu-item e aplicá-la no HTML. Você vai poder mudar seu HTML depois sem problemas. 

Até quando você usa elementos mais padronizados, como <header> ou <h1>, a boa prática é usar classes pra estilizar: 

 HTML  

<header class="topo"> <h1 class="chamada-principal">Compre já!</h1> </header>  

Essas práticas permitem alterar o HTML por motivos de semântica ou conteúdo sem impactar negativamente os estilos aplicados via CSS. Essa técnica está alinhada com o conceito de container queries, uma das novidades no CSS que oferece ainda mais controle sobre componentes responsivos.  

Como nomear classes em CSS para facilitar manutenção e reaproveitamento 

Como boa parte das práticas sugeridas envolve a criação de novas classes, é fundamental nomeá-las de forma clara e legível. Prefira nomes completos e descritivos, como .painel-principal, ao invés de abreviações confusas como .pnlPri. 

Mas não é só isso. Os nomes das classes são a ponte entre seu HTML e seu CSS. Eles serão escritos no meio do conteúdo HTML da página e, portanto, devem ter semântica de conteúdo e não de visual. 

Portanto, evite nomes de classe baseados em aspectos visuais ou posicionamento, como .box-lateral, .titulo-azul ou .painel-direita. Caso o elemento mude de cor, posição ou função, o nome da classe pode se tornar inadequado ou confuso. 

Evite isso criando classes com nomes de conteúdo, como .painel ou .chamada-principal. E, claro, se, eventualmente, você tiver um .titulo-azul no seu código, não deixe a classe com esse nome o dia que a cor mudar pra vermelho; renomeie a classe! 

Documentação e comentários: registre exceções e decisões no CSS 

Toda regra tem exceções. Às vezes, você vai colocar um ID ou tagname no seu CSS. Ou vai precisar de um !important num raro lugar. Ou aquele número mágico que você não vai lembrar depois como calcula. 

Isso deve ser exceção, não abuse. E, sempre que fizer isso, documente direito no CSS o porquê daquela escolha. 

 CSS  

/\* estrutura esperada para o menu: <ul class="menu"> <li><a href=""></a> <li><a href=""></a> </ul> \*/ .menu { ... } .menu li { ... } .menu a { ... } 
/\* usando ID porque o widget do facebook obriga \*/ #facebook-like iframe { width: 100% !important; /\* important pra sobrescrever css inline do widget \*/ }

Construa sua carreira em front-end 

Há muitas outras boas práticas, claro. Você deve identar bem seu código, ordenar as propriedades de maneira lógica e se preocupar com performance. Você pode usar pré-processadores, frameworks e técnicas avançadas (como OOCSS).

Nos cursos de front-end da Alura, falamos de várias dessas técnicas e com muitos exemplos práticos. 

Se você quer aprofundar de verdade e dominar estratégias como mobile-first CSS, Flexbox, Grid e construir uma carreira em front-end, conheça nossa Carreira Desenvolvimento Front-End React. 

O mais importante é manter um cuidado contínuo com seu CSS, buscando torná-lo cada vez mais fácil de manter, reaproveitar e flexibilizar. Essas práticas facilitam tanto o seu dia a dia quanto o de outras pessoas que atuam em seu time de desenvolvimento.