Atribuir um nome de classe à etiqueta em vez de O escrever no ficheiro css?
Estou curioso em saber, é verdade que é melhor atribuir um nome de classe à etiqueta {[[2]} no ficheiro html em vez de a escrever directamente no ficheiro css?
<div class="column">
<img class="custom-style" alt="" />
<img class="custom-style" alt="" />
<img class="custom-style" alt="" />
</div>
em vez de
.column img{/*styling for image here*/}
actualizar:
desculpe, supondo que a questão é múltiplas <img> etiquetas dentro do .column div e todas as imagens estão a usar o mesmo estilo.
5 answers
A resposta curta é adicionar uma classe directamente ao elemento que deseja estilo é, de facto, a forma mais eficiente de atingir e estilo esse elemento. Mas, em cenários do mundo real, é tão insignificante que não é de todo uma questão para se preocupar.
Para citar Steve Ouvers (especialista em otimização CSS) http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/:A manutenção do código é muito mais importante em cenários do mundo real. Uma vez que o tópico subjacente aqui é o desempenho front-end; Os real performance boosters para a renderização de páginas rápidas são encontrados em:Com base em testes, tenho a seguinte hipótese: para a maioria dos sítios web, o os possíveis ganhos de desempenho resultantes da optimização dos selectores de CSS serão pequenos, e não valem os custos.
- Faça menos pedidos HTTP
- utilizar uma CDN
- adicionar um cabeçalho expirar
- componentes Gzip Põe as folhas de estilo no ... top
- coloque os scripts no fundo
- evitar expressões CSS
- Fazer JS e CSS externos
- reduzir a pesquisa de DNS
- Minify JS
- evitar redirectos
- Remover Programas duplicados
- Configure ETags
- faz AJAX cacheável
Fonte: http://stevesouders.com/docs/web20expo-20090402.ppt
Então, só para confirmar, a resposta é sim, o exemplo abaixo é realmente mais rápido, mas estar ciente do maior foto:<div class="column">
<img class="custom-style" alt="appropriate alt text" />
</div>
É apenas mais versátil se você lhe der um nome de classe como o estilo que você especificar só se aplicará a esse nome de classe. mas se você sabe exatamente cada .column img e quero estilo que da mesma forma, não há nenhuma razão para que você não possa usar esse selector.
A diferença de desempenho, se existir, é negligenciável nos dias de hoje.
Atribuir um nome de classe e aplicar um estilo CSS são duas coisas diferentes.
Se te referires a <img class="someclass">, e
.someclass {
[cssrule]
}
, então não há diferença de desempenho real entre a aplicação do css à classe, ou .column img
Depende. Se tiver mais de duas imagens em .column mas só precisa de algumas imagens para ter o css aplicado, então é melhor adicionar classe à imagem directamente em vez de fazer .column img{/*styling for image here*/}
No aspecto de desempenho i a coisa aplicar classe à imagem é melhor porque ao fazê-lo o css não irá procurar uma possível imagem infantil.
Eu acho que a classe em img tag é melhor quando você usa o mesmo estilo em estrutura diferente em seu site. Você tem que decidir quando você escreve menos Linha de código CSS e HTML é mais legível.