How to optimize this SASS media query?

Question

I have the id #wants-to-meet which at 1150px I wanted to change it's CSS.

Normally with media queries all I have to do is just target the id
and sometimes I need to write something like 'parent-selector > targeted-selector'

However my media query is getting crossed-out / negated for some reason:

And for some reason I needed to go this deep to get it to change:

@media all and (max-width: 1150px) {
            #li-affiliate-incoming-msg {
                #message_container {
                    #td-details {
                        #request_details {
                            #wants-to-meet {
                                margin-top: 5px;
                                margin-right: 0;
                                padding: 8px 20px 3px 20px;
                                color: blue;
                                background: red;
                            }
                        }
                    }
                }
            }
        }

I'm using SASS and my #wants-to-meet id is nested 8 tabs deep, could this be the reason why?

Would you know why this is the case?

Answer 1

This reeks of bad nesting. It's a good rule of thumb to only nest three or four levels deep. If you're using IDs in your markup, there's no reason to nest at all since IDs can only occur once.

Basically instead of saying #wants-to-meet to the browser, you're saying #wants-to-meet (browser says ok, got it) that's a child of #request_details (browser says ok, got it) that's a child of #td-details (browser says ok, got it) that's a child of #message_container (browser says ok, got it) that's a child of #li-affiliate-incoming-msg (browser says ok, got it).

It's redundant. Familiarize yourself with CSS specificity here: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Sidenote: it's terrible practice to name a class or ID with an html element as you seem to have done with #li-affiliate-incoming-msg