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

Using the ID tag for that div will make it unique with nothing else #item-img {...} — Mohamed Abusaid, Mar 23 '13 at 20:23
How about you try set an ID for the container that contain all these classes and use it in your css reference like you you said #listings .item-img — Mohamed Abusaid, Mar 23 '13 at 20:27
don't worry too much about performance of CSS selectors. It's unlikely to be an issue. If you have any noticeable performance drop-off from using CSS, then either you have a monstrously huge web page, or there's something far worse going wrong than just the CSS. None of the examples you've described would be likely to give you any performance issues at all. — Spudley, Mar 23 '13 at 20:30
Note that you don't have to use an ID simply because the item in question is unique. You can use a class and restrict yourself in using it uniquely. I'd only use IDs for page anchors (and maye JS). — unor, Mar 24 '13 at 22:14

score 2 · Accepted Answer · answered Mar 23 '13 at 20:30

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 ^^)

score 0 · Answer 2 · answered Sep 22 '16 at 07:43

Case A:

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

It will take more time to render.

Case B:

.item-img { width:100%; }

It Is short and simple. IT will target all element with class "item-img". If you are using same class for different purpose then you can increase specificity of element. You can short by

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

css selector order

2 Answers2