17

Quais são as boas práticas em CSS para manter o código limpo, compacto e manutenível?

  • Deve-se utilizar uma forma mais simples e menos rígida de seletores? (Cenário: há uma div com uma imagem dentro)

Código de exemplo:

.caixa img{}
ou
div.caixa > img
  • Deve-se utilizar seletores para agrupar características (ex: um seletor para deixar a cor do fundo verde e letras brancas) ou especificos para cada elemento comum (botão com a cor do fundo verde, letras brancas, borda preta e negrito)?
  • Como deve ficar organizado no arquivo .css os seletores (ex: O Desenvolvedor vai adicionando novos seletores no final do arquivo)? Deve-se agrupar por arquivo .html, por elemento tag HTML, como seria organizado os seletores de classes que são genericas (ex: um seletor para deixar a cor do fundo verde e letras brancas).

  • Costumo colocar id em areas estuturais do HTML (corpo, menu-esquerdo, menu-direito), e criar um seletor desta forma: isso é má pratica? Aliviar o HTML em detrimento do CSS? seria melhor criar uma classe que conteria toda a aparencia dos elementos (o que deixaria o HTML cheio de classes)

Código exemplo:

#corpo, #menu-esquerdo, #menu-direito{}
1
  • Por favor evitem longas discussões nos comentários; a conversa de vocês foi movida para o chat
    – Maniero
    24/02/2017 às 19:34

3 Respostas 3

19

Eu, pessoalmente recomendaria isso:

  • Procure sempre a simplicidade no código. Evite seletores onde não for necessário. Se você cria um seletor id para a tag body, por exemplo, você pode esquecer que essa id se dirige a ela, portanto, sendo mais intuitivo selecionar pela própria tag. Mas no caso de elementos div, onde geralmente existe mais do que 1 elemento desse tipo na página, é interessante identificá-los com id.
  • É preferível criar um seletor para cada elemento, a não ser quando há muito elementos com a mesma característica, daí é melhor usar class.
  • É interessante usar a herança CSS a seu favor.
  • Eu colocaria os estilos no CSS na mesma ordem em que os elementos aparecem no código HTML.
  • No caso do seu exemplo, div.caixa > img parece ser melhor pois é mais específico. Isso evitaria que o CSS "vaze" para elementos onde não deve ser aplicado.
  • Agrupar seletores é interessante quando tem funções parecidas, mas não estão em quantidade que seja interessante ou não faz sentido a criação de uma class e essa só dificultaria a leitura do código.
  • É interessante usar o seletor *, que seleciona todos os elementos da página, para dar um reset geral no CSS e evitar problemas em decorrência da folha de estilos nativa do navegador.
  • Também me parece uma boa prática criar uma div dentro do body e colocar todo o conteúdo nela se você usa plugins de terceiros na sua página, pois esses geralmente imprimem o código dentro da tag body e, dessa forma, você poderia ter maior controle e reduzir a chance de conflitos.
3
  • 2
    Concordo com o Carlos e ainda recomendo a utilização de algum pré-processador CSS como por exemplo o SASS ou Stylus 25/05/2015 às 14:09
  • Gostaria apenas de contribuir: Eu gosto muito que minhas classes indiquem que determinada coisa é um. O Bootstrap por exemplo usa este conceito, ex: form-control, input-lg, etc... Acho que isso é uma abordagem interessante. 15/06/2015 às 21:00
  • Boa resposta, só discordo do CSSReset, veja: stackoverflow.com/a/8357635/1518921
    – Syzoth
    17/06/2015 às 15:45
18

CSS é um acrônimo para Cascading Style Sheets. O Cascading (cascateamento, cascata, você escolhe...) refere-se justamente a capacidade de criar seletores do tipo

.container .wrapper ul.lista > li:first-child span

que pode ser lido como "O span dentro do primeiro elemento filho direto de uma lista de classe .lista dentro de um .wrapper dentro de um .container. Esse tipo de especificidade é um dos pormenores mais interessantes do CSS, e pode, ao mesmo tempo, ser extremamente poderoso e perigoso. O grande segredo, que talvez responda a sua pergunta, é saber quando usar um seletor rigido, conforme você colocou (o caso do meu exemplo), e quando ser mais flexível e simplesmente criar uma classe .meu_elemento, atribuí-la ao <span> e economizar um monte de linhas. O que nos leva às boas práticas (aquilo que eu considero como, pelo menos). Mas primeiro, vale a pena responder uma pergunta:

O código é meu?

Nada melhor do que este gif para explicar o meu ponto. Certa vez, tive que dar manutenção em um código que foi mantido por outro desenvolvedor durante cerca de 2 anos, e depois abandonado. Nesse tipo de situação, sempre procurei ser bem especifico (i.e., criar seletores que vão acertar a menor quantidade possível de elementos). Dessa maneira, é mais difícil de eu mudar algo sem querer.

Uma vez dito isso, e partindo do pressuposto que você quer sempre criar um CSS legível e de fácil manuntenção, vamos para as boas práticas:

  1. CSS Reset

    Independente do tamanho do seu projeto, se é o site de uma padaria ou o maior e-commerce da galáxia, use um reset. Resets essencialmente corrigem inconsistências entre browsers, como margens, alturas e etc. Alguns frameworks já vem com resets embutidos, o que nos leva ao segundo ponto.

  2. Frameworks

    Tem gente que torce o nariz quando escuta a palavra framework. Eu já acredito que, se alguém (ou uma equipe de alguéns) devotou tempo para desenvolver algo, cujo foco é a escalabilidade, porquê reinventar a roda? Foundation e Bootstrap talvez sejam uns dos mais famosos. Eu, particularmente, estou usando (e aprovando) o Suzy, que é um framework em SASS um pouco menos rigido. Ah...

  3. Pré-processadores

    Variáveis no CSS? Loops? Condicionais? Nesting? Pré-processadores lhe permitem tudo isso e mais um monte de outras vantagens. LESS e SASS são os mais famosos, acredito. Pré-processadores, além de tornar o seu código MUITO mais legível, lhe permitem um grau maior de propagação. Caso você opte por seletores mais específicos, o nesting dos processadores, junto com seus mixins e extends, tornam as coisas bem mais fáceis. Já que estamos falando de especificidade...

  4. IDs ou Classes?

    Já se sabe do berço que IDs definem elementos únicos na sua página, enquanto classes são usadas para elementos que se repetem. Uma coisa que você NUNCA deve fazer é ter <div id="container"> duas vezes na sua página. Apesar disso funcionar, e de você não ter variações gritantes na performance, isto não é uma boa prática.

    O ideal é sempre que você sentir que algo está se repetindo com frequência no seu CSS, é que aquilo torne-se uma classe, sempre que possível. Se, por razões, vários elementos conterem as propriedades float: left e line-height: 1.5, experimente criar uma classe contendo as duas propriedades e distribuí-la, conforme a sua lógica, pelo seu mark-up. Deixe os IDs para elementos ou blocos de elementos específicos, que merecem uma atenção especial.

  5. HTML e CSS inline

    Se você está indo e vindo com frequência para o seu HTML, fazendo ajustes para que suas definições de estilo funcionem, você está fazendo isso errado. Procure, quando você pode, definir o seu HTML da maneira mais simples possível, agrupando elementos que se repetem e evitando ao máximo CSS inline.

  6. Especificidade VS Generalização

    Talvez aqui que esteja o ponto principal da pergunta. Em um código

    <div class="images">
        <img src="/img/1.jpg" alt="">
        <img src="/img/2.jpg" alt="">
        <img src="/img/3.jpg" alt="">
    </div>
    

    Devo usar, como seletor, .images img, div.images img, div.images > img, ou talvez uma classe para as imagens?

    Eu, particularmente, faço uma análise da hierarquia do meu código. Se eu sou genérico demais, e o meu projeto tende a aumentar, pode ser que o meu seletor acerte algo que eu não planejei. Por outro lado, se eu sou extremamente específico, talvez o meu código se torne muito repetitivo, pois estaria adicionando as mesmas prioridades a mais de uma classe ou elemento, o que causa um bloat extremo.

Basicamente, tudo depende de como você arquiteta o seu projeto, e de como ele cresce (lembre-se, nem sempre você tem controle sobre todo o HTML). Generalização pode ser bom, mas como tende a atingir mais elementos, você pode chegar ao ponto de ter uma <div> que é apontada por 5, 6, 7 regras diferentes. Quanto mais regras em um elemento, mais difícil é de mantê-lo e alterá-lo. Especificidade impede que esse tipo de coisa aconteça, mas pode tornar o seu código repetitivo e nada escalável. Eu acredito que frameworks ajudam a contornar esse problema, mas nada que a própria experiência não te diga como fazer. O segredo é achar o ponto de equilibrio entre as duas coisas, sem afetar a performance, e sem fazer com que você arranque os cabelos.

EDIT:

Ainda em tempo: Encontrei um artigo que, apesar de antigo, é bastante interessante, e trata das especificidades dos seletores. Ele pode ser lido aqui.

3

Um dos design patterns mais utilizados atualmente no CSS é o chamado BEM.

BEM, acrônimo de "Block, Element, Modifier", nada mais é do que usar nomenclaturas padronizadas de forma a ajudar um desenvolvedor a identificar a função de uma classe CSS só de bater o olho no seu nome. Ela utiliza o padrão: .bloco__elemento--modificador.

Um bom exemplo de uso prático seria o código abaixo:

<div class="contador">
    <button class="contador__botao contador__botao--subtrair"> - </button>
    <input class="contador__campo" type="number">
    <button class="contador__botao contador__botao--somar"> + </button>
</div>

Onde as classes do exemplo acima representariam:

  • .contador: classe geral do bloco-pai do que será estilizado;
  • .contador__input: classe referente à todos os inputs pertencentes ao bloco-pai.
  • .contador__botão: classe referente à todos os botões pertencentes à este bloco-pai;
  • .contador__botao--subtrair/somar: modificador do botão (continua sendo um botão, mas possuindo um subtipo, neste caso, "somar" ou "subtrair".

Onde ao bater o olho, qualquer conhecedor to padrão conseguiria identificar exatamente as funções de cada classe sem mesmo ver seu conteúdo.

Entre as vantagens de se usar o BEM como padrão estão:

  • Padronização de nomenclatura;
  • Fácil identificação das funções das classes antes mesmo de ver o código;
  • Melhor manutenção e escalabilidade em projetos grandes (por causa da padronização);
  • Prevenção de conflito entre propriedades e classes CSS.

Entre as desvantagens, temos por principal:

  • Nomenclatura esteticamente "feia" (classes com nomes grandes);
  • "Engessamento" de classes (ao invés de uma classe .btn para todos os buttons, teríamos .escopoX__btn, .escopoY__btn, etc.

BEM, assim como outros padrões em ascendência no mercado tem seus pontos fortes e fracos, e assim como qualquer padrão no mundo da TI, deve ser avaliado e usado de acordo sua utilidade no projeto.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .