Seu código CSS pode ser mais limpo, flexível e reaproveitável

Bons programadores aprendem boas práticas de código desde criancinhas. Encapsulamento, bons nomes de variáveis e métodos, orientação a objetos e outros conceitos clássicos estão na ponta da língua. Apesar disso, vejo muito programador bom fazendo código front-end ruim. Minha opinião? Fazer um bom código front-end é mais difícil do que parece.

Escrever um bom JavaScript costuma ser mais fácil. Por ser uma linguagem de programação parecida com as outras, conseguimos mapear bem os conceitos de encapsulamento e orientação a objetos (apesar da dificuldade dos prototypes).

Mas, com HTML e CSS, a coisa começa a ficar mais complicada. Como ter um CSS mais reaproveitável? Algumas boas práticas para devs front-end:

Heróis

Não sobrescreva suas próprias regras 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:

/* 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:

/* mobile */
/* nada aqui! o padrão é float:none */

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

Abuse de classes pra reaproveitar código CSS. Evite IDs.

IDs são muito inflexíveis: só podem aparecer uma vez na página e um elemento não pode ter mais de um ID (o elemento é um singleton). Isso faz do ID o vilão do reaproveitamento de código.

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 nos permitem o tipo de reaproveitamento que a herança nos traz 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:

  <div class="box menu">...</div>
  <div class="box noticias"></div>
   .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.

Não brigue com a especificidade do CSS.

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.

Números mágicos são um mal sinal no 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).

Use unidades 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.

Evite acoplar o estilo CSS a tags específicas do HTML.

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:

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

Tudo isso te deixa muito mais livre pra mudar o HTML por razões de semântica e conteúdo, sem afetar o estilo CSS.

Dê bons nomes pra suas classes

E já que boa parte das práticas envolve criar novas classes, é bom saber nomeá-las direito. A regra óbvia, quer você já segue, é criar nomes legíveis e fáceis de entender. Use .painel-principal ao invés de .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.

Isso quer dizer que você não deveria criar classes chamadas .box-lateral ou .titulo-azul ou .painel-direita. Se o seu box não for lateral ou o título mudar de cor ou o painel mudar de lado, sua classe perde significado.

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!

Documente bem as exceções.

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.

/* 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 */
}

Mais

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). No curso de front-end da Caelum, falamos de várias dessas técnicas e com muitos exemplos práticos.

O importante é ter um cuidado especial pelo seu CSS para deixá-lo sempre o mais fácil, reaproveitável e flexível o possível. Isso vai ajudar o seu dia a dia e dos outros devs da sua equipe.

Tags: , ,

52 Comentários

  1. Caio Ribeiro Pereira 16/01/2013 at 09:56 #

    Excelente dica!
    Só pra complementar o post, uma boa leitura para desenvolver CSS escalável e mais organizado: Livro do SMACSS -> http://smacss.com/

  2. Ronildo Costa 16/01/2013 at 10:48 #

    Excelente artigo Sergio!
    Seria mais fácil, se todo projeto que fossemos fazer fosse muito bem estruturado.
    Mas o mundo não funciona como deveria ou como gostariamos, veja o css do blog que vc escreve:
    #nav li ul ul li a {
    line-height: 25px;
    }

    As vezes é díficil mantermos os padrões e boas práticas em tudo que fazemos.

  3. Arthur Ferreira 16/01/2013 at 10:54 #

    Fantásticas as colocações, Sérgio! Muito disso eu faço, preciso melhorar meus hábitos rs.

  4. Éder Costa 16/01/2013 at 11:02 #

    Parabéns pela simplicidade do texto e abrangência do assunto. Ficou tudo muito completo e simples para devs que desejam atuar efetivamente como Front-End.

  5. Felipe Caparelli 16/01/2013 at 11:05 #

    Fantástico artigo Sérgio!

    Reciclei um monte de conceitos e aprendi muito sobre um assunto que sempre achei dominar… e descobri que não.

    Mas a vida é isso mesmo. Vou compartilhar geral, pois sei que muitos bons programadores back-end não tem a mínima noção de front-end e muitas vezes desvalorizam isso, em geral por preconceito ou mesmo por não saber.

  6. Júnior Leles 16/01/2013 at 11:40 #

    Parabéns por mais um excelente post! Tenho dedicado um pouco de tempo para aprender Css e com dicas assim fico ainda mais entusiasmado para continuar o meu aprendizado!

  7. Sérgio Lopes 16/01/2013 at 12:49 #

    @Ronildo Esse blog é bem ruim. É WordPress e seus temas cheio de cacas.

    Por isso que tenho preferido Jekyll ultimamente e feito tudo à mão, como no meu blog pessoal: http://sergiolopes.org. (mas claro que isso não quer dizer que meu código é perfeito; falar é mais fácil que fazer, com certeza hehehe)

  8. Arthur Carvalho 16/01/2013 at 13:45 #

    Excelente Post!
    Eu tenho sido fortemente atraído pelo front-end e seus posts e blog tem me ajudado bastante, obrigado.
    Como javeiro/backend-dev consigo assimilar facilmente as idéias que voce passa, talvez por voce explicar entendendo as nossas dificuldades.

    Voltando um pouco para o CSS, reparei que na ultima atualização do seu blog voce optou por media queries com medidas em ‘em’.
    Alguma boa prática que você tenha descoberto quanto a isso?
    Alguma vantagem sobre as porcentagens?

    Valeu.

  9. Stélio Moiane 16/01/2013 at 14:06 #

    Oi Sérgio, realmente a tua abordagem é muito boa, o código fica muito mais claro e leve. Parabens

  10. Sérgio Lopes 16/01/2013 at 15:04 #

    @Arthur

    Tenho um rascunho de artigo sobre media queries com ‘em’, é um assunto que quero postar há muito tempo.

    Resumindo: acessibilidade. Com ‘em’, a media querie é reavaliada quando o usuário dá zoom no browser (desktop) e reaplica o layout.

    Espero conseguir terminar o artigo e aí coloco uns demos do que quero dizer…

  11. Sérgio Lopes 16/01/2013 at 15:29 #

    E só porque falei que ia postar sobre media queries em ‘em’, saiu um artigo agorinha no CSS Tricks sobre isso. Pra quem lê em inglês:

    http://css-tricks.com/zooming-squishes/

    (ainda pretendo postar o meu em PT também)

  12. Arthur Carvalho 16/01/2013 at 16:22 #

    Hehe muita coincidência, chegou no meu reader tb.
    Testei o zoom no seu blog (firefox). Realmente muito legal.
    No chrome parece que ele não reaplica o layout por ems, pelo menos aqui não funcionou.

  13. Sérgio Lopes 16/01/2013 at 16:29 #

    No Chrome, precisa dar o zoom e refresh na página pra aplicar. É um bug conhecido que o pessoal não conserta: https://bugs.webkit.org/show_bug.cgi?id=41063

    Firefox e IE funcionam corretamente, reaplicando as media queries conforme o zoom do browser.

  14. Pedro Lopes 16/01/2013 at 20:11 #

    Simplesmente sensacional…

    Algumas eu já usava sem saber… Outras nem fazia noção…

  15. fernando 16/01/2013 at 22:51 #

    Legal o artigo, lembrando também que é legal separar o posicionamento e tamanhos da tipografia e cores. Utilizar um pre processador também ajuda a manter um código bem estruturado e de fácil manutenção, e é claro, sempre minimizar para melhorar o desempenho!
    Parabéns pela matéria.

  16. Renato Cerullo 17/01/2013 at 07:21 #

    ÓTIMO post !!!!

    Parece óbvio, mas são dicas importantes e vejo poucas pessoas utilizando.

    Foi a primeira vez que vejo alguém defendendo o uso de % como unidade de medida e não px, por exemplo.

    Parabéns !!!!

  17. wagner 17/01/2013 at 11:04 #

    Legal

  18. lufell 18/01/2013 at 16:48 #

    Boas dicas no post. Parabéns!

  19. Almir Filho 18/01/2013 at 18:25 #

    Mandou bem! Preciso modificar umas péssimas práticas minhas de CSS…

  20. Carlos Roberto 19/01/2013 at 12:09 #

    Ótimas dicas!

  21. Leonardo Lima 19/01/2013 at 15:55 #

    Muito legal essas dicas, isso é muito importante dizer porque o pessoal costuma dizer por ai que CSS é facil mas se esquece que por ser facil não quer dizer que não usamos padrões.
    Abs..

  22. palmer 21/01/2013 at 12:38 #

    Cara, muito bom, sempre curti teus posts, por serem super objetivos.
    Abraços

  23. Vitor Melo 21/01/2013 at 21:57 #

    Ótimas dicas, utilizar valores arredondados sempre facilita em um possível redesign.

  24. Juliane 23/01/2013 at 12:52 #

    Fera demais, as dicas, o difícil é seguir depois que vc já tem más práticas. Mas adorei demais.
    Obrigada

  25. Frederico Cruz 24/01/2013 at 11:49 #

    muito bom!

  26. Joy 25/01/2013 at 03:03 #

    Estou começando a atuar como dev front-end e já sigo algumas dessas práticas, muitas foram novidade.
    Obrigada por compartilhar!

    Você tem algum conteúdo bom sobre acessibilidade pra indicar? Valeu.

  27. Sérgio Lopes 27/01/2013 at 13:57 #

    @Joy As palestras do Horácio Soares são um excelente começo: http://www.slideshare.net/horacio.soares/presentations

  28. Sérgio Lopes 30/01/2013 at 13:05 #

    Como prometido antes: meu artigo sobre media queries, acessibilidade e zoom no browser:

    http://sergiolopes.org/media-queries-zoom/

  29. Carlos Moreira 31/01/2013 at 12:07 #

    Existem algumas ferramentas muito interessantes para tratar o CSS, tais como o LESS, SASS e Compass. Vale a pena dar uma olhada.

  30. Juliano Pacheco 03/02/2013 at 23:10 #

    Realmente, ótimas dicas.

  31. Edinho Freitas 27/02/2013 at 17:30 #

    Boa tarde.
    Parabéns e obrigado por esse excelente conteúdo.

    Minha unica duvida e em relação a usar porcentagem em vez de tamanhos fixos. Como fica a questão de desempenho?
    Uma vez que a utilização de porcentagem consume mais o processamento do browser que recalcula cada alteração que a pagina sofre. Já vi alguns posts, e aqui mesmo na Caelum, dando prioridade a utilização de tamanhos fixos.

  32. Sérgio Lopes 28/02/2013 at 13:12 #

    @Edinho – Nos browsers modernos, essa diferença de performance entre porcentagens e pixels é totalmente imperceptível. É importante otimizar sim suas páginas, mas as outras otimizações mais ligadados aos requests que você faz são bem mais importantes.

    Pode usar porcentagens sem medo 🙂

  33. Bernardo 01/05/2013 at 00:18 #

    Olá,

    Tenho um site hospedado no webnode e quero muito colocar este site em layout fluido porém não sei mexer em nada disso!!! Será que alguém poderia me ajudar?
    O webnode fornece todo site completo, so tenho que editar o conteúdo. É um site voltado para HIV/AIDS.
    Se alguém puder por favor, me ajudar ficarei muito grato.

  34. Roberto Nicoletti 05/07/2013 at 16:32 #

    Excelente post. Ter um código bem estruturado evita muitos problemas e principalmente retrabalho.

  35. Christyan 14/08/2013 at 10:16 #

    Bom dia.
    Tenho uma duvida, escrever um bom CSS, faz diferença entre colocar em varias linhas ou uma linha continua ?
    exemplo:
    .teste { color:#CCC;
    padding:10px;
    margin:10px;
    }
    ou
    .teste { color:#CCC; padding:10px; margin:10px;}
    qual o melhor jeito ?

  36. Jeremias 22/10/2013 at 15:24 #

    Sou um assassino de focas ):

    A dor de cabeça começa mesmo quando você traz um css de fora como a do bootstrap, e começa a dar conflito com o seu, ou ele possui algumas regras que bagunçam seu layout

    Qual a melhor maneira de dar nome a uma classe ou id se ela possui um nome formado com duas palavras??

    => menu-principal
    => menuPrincipal
    => menu_principal
    => MenuPrincipal

    Muito boa as dicas.

  37. Astésio José do Carmo Júnior 03/11/2013 at 13:41 #

    primeiro gostaria de parabenizar pelo excelente post, muito bom, uma dica para quem ler esse post, adquira o pacotão, ele mudou minha vida, não sei se você se lembra quando eu comentei com você no facebook, que estava passando por uma fase de seleção e me pedirão para fazer uns teste, criar umas tela dos sistemas da empresa para mobile, então foi onde eu usei todas as tecnicas aprendidas no livro partindo das boas praticas tanto do mobile first quanto do CSSOO, foi de muita valia, gostei tanto que estou organizando com a minha empresa para ver se ela paga os curso de front ai na caleum do rio, vou aproveitar minhas ferias quem sabe se ela me ajudar ao menos em 60% e garantido que eu vou, será que você que vai dar aula ai no rio? na época de Janeiro na data 13/01 a 17/01 e 21/01 a 24/01, pergunto isso porque virei um fâ seu, logico que se não for tenho certeza que aprenderei do mesmo jeito, pois tenho certeza que a caelum tem qualidade nos que diz a respeito de educação digital. Forte abraço.

  38. Danilo Agostinho 06/11/2013 at 04:14 #

    Excelentes dicas meu caro! Já estou pondo em prática boa parte das dicas que acabei de ler. Acredito que isso diferencia alguém que ama o que faz, e que por amor a profissão se atualiza na área, para alguém acomodado que acha que suas práticas são as melhores ou/nem sabe que existem boas práticas reaproveitamento de código. Abraço!

  39. Marco Antonio 12/05/2014 at 14:49 #

    Excelente post! Se todos seguissem essas práticas teríamos uma web melhor. rsrs

  40. Renato Faria 19/06/2014 at 21:00 #

    Parabéns! Dicas super importantes! Obrigado!

  41. Gabriel 18/11/2014 at 22:44 #

    Grande post Sérgio!

    Só eu por aqui que fiquei desesperado pra arrumar MUITA coisa no meu CSS?? HAHA

    []s

  42. Matheus Amaral 16/12/2014 at 19:32 #

    Muito bom o post, parabéns!

  43. Debora 08/05/2015 at 00:30 #

    Gostei muito do post, esclareceu algumas dúvidas antigas e me fez pensar melhor sobre algumas coisas 😀

  44. Matheus Henrique 26/05/2015 at 21:11 #

    Muito obrigado, seu post me ajudou muito a continuar a construir o meu site. Já estava desistindo por falta desorganização do site e você postou isso e eu achei na net 🙂

  45. Mateus Desgin 26/08/2015 at 13:19 #

    TEM COMO VOCÊ DAR UM BR , NO CSS?

  46. Amanda Teixeira 27/08/2015 at 19:13 #

    Muito legal! Parabéns pelo seu artigo, mas isso realmente funciona? Beijos, Amanda.

  47. Juliano Cesar Chumann 30/03/2016 at 06:57 #

    Bom dia Sérgio, tenho um blog mas não entendo muito de HTML e CSS e queria que um dos meus anúncio do Google AdSense só aparecessem no desktop e não pra dispositivos mobile.
    É possível fazer isso através da edição do código do anúncio ou tem outra maneira?
    Se puder me dar umas dicas ficarei grato!

Deixe uma resposta