css selector order

Question

I am confused as how to properly declare css selectors in terms of performance and web standards

Assuming my html markup is

<div class="itemList">
    <div class="itemList-img-wrapper">
         <img class="item-img" src="reref.jpg" />
    </div>
     <div class="bottom">
          <div class="info"> <h2>Data is invalid</h2> </div>
     </div>
 </div>

there are various of declaring css to design this html

If I want to design .item-img I can do so in two variations
A:

 .itemList .itemList-img-wrapper .item-img { width:100%; }

or B:

 .item-img { width:100%; }

I was told that variation A is preferred since it makes it unique, thus if I use the class .item-img on somewhere else in the css file, the css will not be applied. which one is preferred in terms of standard and performance? And If I want to make sure its specific to a page, should I add an ID tag at the body of page and declare the css as Assuming there is a page listings.php

#listings .item-img  

or

#listings .itemList .itemList-img-wrapper .item-img

Answer 1

B is slightly more performant than A, but really it's irrelevant: both are FAST. There are countless other areas of improvement (less images and files downloaded, DL from other domain names, weight of JS, CSS and images, selectors in JS, etc). CSS selectors are close to last in performance priorities (whitespace and comments in HTML code comes last imo)

You should use, as far as I can tell, the selector B. But without the rest of the pageS, it's hard to answer. What other uses are there to this class? Will it be reused elsewhere? How?
Why have you got a class named List and also item but it's not an ul element? Why do you add "-img" to the name of a class on an img? Would img.item also work for you, or simply .someParent img? Etc

I am confused as how to properly declare css selectors in terms of performance and web standards

There's no web standard telling you which selector you should use ;) This is about code quality, conventions in your team or with your client or personal preferences, thinking at the project level (that's hard and need experience and enough PSDs given by the client. Regularly I've to name classes with 2 PSD and then come 20 others ^^)