Sono consapevole che le regole ID sono più veloci delle regole di classe, che sono più veloci delle regole di tag, che sono più veloci delle regole universali, come indicato su MDN. La mia domanda riguarda le prestazioni dei CSS rispetto all'ereditarietà. Ad esempio, quale dei seguenti è più efficiente?Prestazioni CSS rispetto all'eredità
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
h1 {
font-family: Georgia, serif;
font-size: 36px;
font-weight: 700;
}
o
h1 {
font-family: Georgia, serif;
font-size: 36px;
font-weight: 700;
}
.article-text {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
Mentre non v'è un solo <body> tag nel DOM, ci potrebbero essere centinaia di p.article-text elementi. Poiché esiste un solo tag <body>, significa che uno stile <body> è più efficiente, anche se dovrei eseguire il restyling degli elementi <h1>? O è più efficiente stilare gli elementi .article-text, poiché così facendo userò un selettore più specifico e non dovrei preoccuparmi di restyling degli elementi <h1>?
Mi sono sempre chiesto questo. Pensieri?
Fare un punto di riferimento e scoprire? – cimmanon
Direi che la "cascata" di CSS (che eredita gli stili dagli elementi parent) è altamente efficiente. Questo non richiede affatto un selettore. La mia comprensione è che 'body' dovrebbe essere in stile nel modo in cui si desidera il corpo principale di testo normale all'interno del documento in stile - per quello che è il contenitore. –
Nel grande schema del rendimento della pagina, [non vale la pena di preoccuparsi] (http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/) (o almeno non vale la pena di preoccuparsi fino a quando non avrai affrontato molti altri fattori: concatenazione, minificazione, ecc.) – steveax