Question

I’m vastly trying to build a solid and responsive coding style. My general question concerns styling child classes. Let me give example first:

    <div class="pageHeader">
        <div class="cnt">
            <div class="logo">
                <a href="#" title="logo">My Logo</a>
            </div> <!-- .logo-->
            <div class="menu">
            </div> <!-- .menu-->
        </div> <!-- .cnt-->
    </div><!-- .pageHeader -->

I use the pageContainer / pageHeader/ pageBody / pageFooter notation for my main page structure. So here’s the question: How should i write specific selector like .logo ? Which notation should i use and why:

.pageHeader .cnt .logo a {}
.pageHeader .logo a {}
.cnt logo a{}
.logo a{}

Obviously if you you have better idea for notation in this case, please tell.

Answer 1

Line 2

.pageHeader .logo a {}

The reason is that I want to not have to worry about reusing generic class names elsewhere in the app, so I want to scope everything by it’s “component” container. On the other hand, I don’t want to default to the max level of specificity, which is why I don’t do line 1