How much nesting should a CSS selector have?

Consider a reusable component/widget that can be used multiple times on a page. It has HTML like this:

<div class='component-banner'>
    <div class='component-heading'>
        <p>My Widget</p>
    </div>
    <div class='component-body'>
        <p>Blah blah</p>
    </div>
</div>

It could have CSS like:

.component-heading p { ... }
.component-body p { ... {

or like:

.component-banner .component-heading p { ... }
.component-banner .component-body p { ... }

So, how should the CSS be written? I'm wondering mainly for rea开发者_如何学JAVAdability and maintainability but there may be other factors I haven't thought of.

---

Declare the css rules in the most specific ways as needed

If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.

The actual specificity of a group of nested selectors takes some calculating. Basically, you give every id selector ("#whatever") a value of 100, every class selector (".whatever") a value of 10 and every HTML selector ("whatever") a value of 1. Then you add them all you have the specificity value.

so:

.component-banner .component-heading p { color:green }
.component-heading p { color:red }
 p { color:blue }

the .component-banner .component-heading p turns green, regardless of the order.

 #test p {color:orange}
 body div p { color:green }
 div p { color:red }
 p { color:blue }

the #test p turns orange, regardless of the order.

---

The answer about specificity is on the right track. This deliberate lack of specificity is part of an approach called Object Oriented CSS (oocss), which encourages use of class selectors over ID selectors, and building in a more modular fashion, making heavy use of multiple classes on the same HTML element, and reusing classes. Also encouraged is minimizing use of !important (it breaks the cascade and lowers maintainability) and leaving redundant HTML elements out (which you are already doing to some extent, ie, using .component-heading instead of div.component-heading).

Following this approach to the extent possible can greatly streamline your CSS by lowering the need for really long selectors with multiple IDs or classes.

Object Oriented CSS

---

It really depends on your specifications and requirements, eg. whether the web application you're writing is meant to be maintainable in the long term, modular and hence easily integrable with other components constituting an overall framework. In that case, adopt the namespace concept, having all the CSS,JS related code for your own module, in a way that doesn't conflict with any future or user code is my advice.

---

This is a good question. Since .component-browser is at the root of your reusable component, I'd think thats enough context to ensure the rules only apply to that component.

---

Have you considered the rendering time of selectors? IDs are most efficient, * is the least.

http://css-tricks.com/efficiently-rendering-css/

That may be, as you say, "other factors [you] haven't thought of".