1

Na página que estou fazendo estou usando um Spritesheet com mais de 50 imagens diferentes, porém todas estão em no mesmo arquivo .png e preciso passar a posição de onde cada elemento está nessa imagem (background-position).

Vendo a grande quantidade de elementos com estilos únicos, o que é melhor eu fazer:

A) Ter o estilo de cada elemento com CSS inline <div style="background-position: 30px 20px;"> direto no HTML.
ou
B) Ter uma ID para cada elemento <div id="imagem_47"> e adicionar o estilo de cada uma no arquivo CSS #imagem_47 {background-position: 30px 20px;}.

Existe alguma diferença de performance ou compatibilidade entre as duas opções? Ou é só questão de gosto e organização mesmo?

2 Respostas 2

3

Como o Weslley Tavares mencionou, o desempenho acaba sendo melhor quando se utiliza CSS inline (que é definir o atributo style diretamente na tag). Mas, a não ser que você esteja usando um framework que gerencie esses atributos pra você (mais ou menos o que o react.js faz), ou que você tenha escrito uma aplicação server-side que facilite isso, duvido muito que esse ganho de performance valha a pena, até porquê ele é praticamente nulo.

Partindo do pressuposto que você faz isso manualmente, acredito que o mais vantajoso seja o uso de classes. O uso de sprites somente já lhe trás um ganho enorme de performance, e o manuseio dessas classes - e do próprio HTML - tendo em vista manutenção e escalabilidade vai ser muito mais fácil, uma vez que você tenha isso em um arquivo separado. Este é o famoso decoupling. Aqui você pode ler um artigo (em inglês) bastante interessante sobre isso.

Outra coisa que é bacana mencionar, apesar de você não ter perguntado, é a diferença de performance entre o uso de IDs e classes. Já dei uma resposta sobre isso aqui, onde, basicamente, mostro que não há diferença (em termos de ganho, veja bem), a não ser que a sua aplicação seja extremamente grande. Então, quando a isso, você não precisa se preocupar.

Uma outra preocupação que você deve, sim, ter, é com relação a especificidade. Veja este exemplo:

div{
  width: 100px;
  height: 100px;
}

#testeID{
  background: red;  
}

.testeClasse{
  background: green;  
}
<div id="testeID" class="testeClasse"></div>

Veja que o ID é mais especifico que a classe, ou seja, as suas regras serão as que serão aplicadas, em caso de conflito. Caso eu faça

div{
  width: 100px;
  height: 100px;
}

#testeID{
  background: red;  
}

.testeClasse{
  background: green;  
}
<div id="testeID" class="testeClasse" style="background: blue"></div>

veja que, agora, a regra inline sobrescreveu a regra do ID. De maneira bem branda, a especificidade funciona assim

regra de tag < classe < ID < estilo inline

Nessa outra resposta, eu falo mais um pouco sobre especificidade, o que pode lhe trazer uma luz na hora de escolher como construir o seu código.

2
  • 1
    Resposta bastante esclarecedora, Caio Pereira. Acredito que seguindo os seus conselhos, o autor da pergunta possa ter uma visão mais geral do contexto. Commented 22/10/2015 às 17:13
  • Obrigado Caio, ótima explicação e exemplos. Já estou vendo várias formas de manter o meu código mais limpo e legível, e como fazer esses estilos em um arquivo CSS parece a melhor opção neste caso, vai ajudar bastante na otimização do código para manutenção. E se acabar ajudando alguém, achei um artigo muito bom sobre boas práticas para CSS: innofied.com/25-css-best-practices-we-follow-at-innofied Commented 23/10/2015 às 2:14
2

Bem, ao utilizar a opção de criar um arquivo CSS, o que lhe impede de criar classes no lugar de setar diretamente ao componente, através do ID? Caso sua aplicação sofra uma alteração (seja por necessidade de escalabilidade ou uma manutenção) esse processo seria bem menos doloroso.

Outra coisa, por mais que os componentes apresentem comportamentos diferentes, no contexto geral, eles podem apresentar alguma compatibilidade entre um atributo e outro, o que já poderia ser reaproveitado através das classes definidas no CSS. Enfim, isso é coisa de gerência de projetos (e boas práticas).

E voltando para a questão do desempenho, o inline acaba sendo melhor, já que a página não vai ter que realizar o GET para buscar o arquivo CSS, porém, esse ganho do inline ante o CSS ainda não é o suficiente para se comparar com o ganho obtido na sua codificação quando se faz uso do CSS.

Espero ter ajudado.

1
  • Obrigado Weslley. Pensei em usar inline apenas nas especificações do spritesheet, mesmo assim eu ainda utilizaria um arquivo CSS, então no caso, realmente não vale a pena usar inline para isso, já que só dificultaria a manutenção do código. Commented 23/10/2015 às 2:04

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 .