Assegnare un nome di classe al tag <img> invece di scriverlo nel file css?

Question

Sono curioso di sapere, è vero che è meglio assegnare un nome di classe al tag <img> nel file html invece di scriverlo direttamente nel file css?

<div class="column"> 
    <img class="custom-style" alt="" /> 
    <img class="custom-style" alt="" /> 
    <img class="custom-style" alt="" /> 
</div> 

invece di

.column img{/*styling for image here*/} 

ho bisogno di sapere v'è alcuna differenza tra di esse in termini di prestazioni web?

UPDATE:

Mi dispiace, supposely la questione è più <img> tag all'interno del .column div e tutte le immagini stanno utilizzando lo stesso stile.

Answer 1

La risposta breve è l'aggiunta di una classe direttamente all'elemento che si desidera creare, in effetti è il modo più efficace per definire come target questo elemento. MA, negli scenari del mondo reale è così trascurabile che non è affatto un problema di cui preoccuparsi.

Per citare Steve ouders (esperto CSS ottimizzazione) http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/:

Sulla base di test ho la seguente ipotesi: Per la maggior parte dei siti web, i possibili miglioramenti delle prestazioni da ottimizzare selettori CSS sarò piccola, e non valgono i costi.

La manutenibilità del codice è molto più importante negli scenari del mondo reale. Poiché l'argomento sottostante qui è il rendimento front-end; i booster reali prestazioni per il rendering delle pagine veloci si trovano in:

• fare meno richieste HTTP
• Utilizzare un CDN
• Aggiungi un Expires
• componenti Gzip
• fogli di stile mettersi in cima
• Inserisci script in fondo
• Evita espressioni CSS
• Marca JS e CSS esterno
• Ridurre ricerche DNS
• Minify JS
• Evitare reindirizza
• blocca gli script duplicati
• Configura etags
• Fai AJAX cacheable

Fonte: http://stevesouders.com/docs/web20expo-20090402.ppt

Così solo per confermare, la risposta è sì, e xample sotto è davvero più veloce, ma essere consapevoli del quadro più ampio:

<div class="column"> 
    <img class="custom-style" alt="appropriate alt text" /> 
</div> 

Answer 2

Assegnare un nome di classe e applicare uno stile CSS sono due cose diverse.

Se vuoi dire <img class="someclass">, e

.someclass { 
    [cssrule] 
} 

, quindi non v'è alcuna reale differenza di prestazioni tra l'applicazione del css alla classe, o per .column img

Answer 3

sua dipendono. Se hai più di due immagini per applicare il css, è meglio aggiungere direttamente la classe all'immagine invece di fare .column img{/*styling for image here*/}

In termini di prestazioni, cosa che applico la classe all'immagine è meglio perché facendo quindi css non cercherà l'immagine del bambino possibile.

Answer 4

È più versatile se si assegna un nome di classe, poiché lo stile specificato si applica solo al nome di tale classe. Ma se si conosce esattamenteogni.column img e si desidera applicare lo stile allo stesso modo, non c'è motivo per cui non è possibile utilizzare tale selettore.

La differenza di prestazioni, se presente, è trascurabile in questi giorni.

Answer 5

Credo che la classe sul img tag è meglio quando si utilizza lo stesso stile in struttura diversa sul tuo sito. Devi decidere quando scrivi meno righe di codice CSS e HTML è più leggibile.