I am confused as how to properly declare css selectors in terms of performance and web standardsAssuming my html markup is\[code\]<div class="itemList"> <div class="itemList-img-wrapper"> <img class="item-img" src="http://stackoverflow.com/questions/15591602/reref.jpg" /> </div> <div class="bottom"> <div class="info"> <h2>Data is invalid</h2> </div> </div> </div>\[/code\]there are various of declaring css to design this htmlIf I want to design .item-img I can do so in two variations
A:\[code\] .itemList .itemList-img-wrapper .item-img { width:100%; }\[/code\]or B:\[code\] .item-img { width:100%; }\[/code\]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 asAssuming there is a page listings.php\[code\]#listings .item-img \[/code\]or \[code\]#listings .itemList .itemList-img-wrapper .item-img\[/code\]
A:\[code\] .itemList .itemList-img-wrapper .item-img { width:100%; }\[/code\]or B:\[code\] .item-img { width:100%; }\[/code\]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 asAssuming there is a page listings.php\[code\]#listings .item-img \[/code\]or \[code\]#listings .itemList .itemList-img-wrapper .item-img\[/code\]