Is it wrong to use CSS in this way?

coding-style, css, html

Solution

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.

Problem

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?

Original source

Related problems