I am aware than ID rules are faster than class rules, which are faster than tag rules, which are faster than universal rules, as noted on MDN. My question pertains to CSS performance with respect to inheritance. For example, which of the following is more efficient?
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
h1 {
font-family: Georgia, serif;
font-size: 36px;
font-weight: 700;
}
or
h1 {
font-family: Georgia, serif;
font-size: 36px;
font-weight: 700;
}
.article-text {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
While there is only one <body> tag in the DOM, there could be hundreds of p.article-text elements. Since there is only one <body> tag, does that mean that a <body> style is more efficient, even though I'd be restyling the <h1> elements? Or is it more efficient to style the .article-text elements, since doing so would use a more specific selector and I wouldn't need to worry about restyling the <h1> elements?
Always wondered this. Thoughts?
bodyshould be styled the way you want the main body of plain text within the document styled -- that what it's the container for. – Thomas W Jul 20 '13 at 1:04div[^="someField"] { }, ... #someField1314 {}modern browsers (even on phones) do this blazingly fast. Also notice that once the CSS file is cached, it doesn't matter if it's hundreds of kilobytes. I build a heavy CSS animation-driven website some time ago which the CSS files together were over 3 MegaBytes big (compressed :P). I just used an AJAX loader once (a bit like Flash clips do). Once cached every page load was instant :) I would sweat more over big JavaScript chunks ;) – Allendar Jul 20 '13 at 21:22