CODEWITHSUNDEEP
csshtml
Nick Bull
Nick Bull

Reputation: 9866

HTML5 and CSS selectors - counter-intuitive?

I have a question that's been bugging me ever since I read this. I've got the general just that CSS selectors with multiple elements work backwards, and that key selector is the one that determines a lot of the efficiency as it narrows down the number of DOM elements that are selected by the prefixing rules.

However this has confused me. Namely in relation to the new HTML5 <header>, etc (block-style tags). I use <header>, etc. tags to avoid using the HTML structure of <div class="header">. Why would I bother to use the <header> tag from an efficiency POV if I just end up having to write <header class="header"> to improve efficiency.

Also in the general sense, what would your proposal be for the generic structure of selectors? Given the document below, as an example: EDIT I am so sorry, I forgot to state which element. In this case, what would your selector be for the <img> tag.

<header>
    <div>
        <img src="http://www.google.com/" />
    </div>
</header>

Finally, how much does this affect the efficiency of the web page in question? Is it worth thinking about (after gzip, JS placement in the DOM, minification etc) or is it just nitpicking? Thanks for your time!

Upvotes: 0

Views: 262

Answers (1)

Christoph
Christoph

Reputation: 51201

In my experience, selector performance is negligible for normal sized html documents. Trying to avoid writing inefficient monster selectors (*, attribute- and pseudo class/element selectors) is all you need, if you don't have a high-performance site.

You won't notice the difference between header and div.header selectors, it's better to spend your time elsewhere.

Upvotes: 2

Related Questions