Question

Lately I’m using a CSS structure that makes HTML much cleaner but I don’t know if there’s something wrong with this.

Instead of using:

.top { //properties }

.top-wrapper { //properties }

.top-logo { //properties }

And for HTML:

<div class="top">
    <div class="top-wrapper">
        <a href="" class="top-logo">Logo</a>
    </div>
</div>

I’m actually coding like this:

.top { //properties }

.top .wrapper { //properties }

.top .wrapper .logo { //properties }

And for HTML:

<div class="top">
    <div class="wrapper">
        <a href="" class="logo">Logo</a>
    </div>
</div>

Is it wrong to do this?

Answer 1

It is not wrong, but the more selectors you have, the higher the resulting specifity of your style. For more information about specifity see http://www.w3.org/TR/CSS21/cascade.html#specificity.

Imagine your example

.top .wrapper .logo { font-size: 10px; }

followed by this:

.logo { font-size: 20px; }

The <a class="logo"> will have a font-size of 10px, even though you specified it to be 20px for the second declaration.