Here's an example of some markup:

```
<div class="document">
  <div class="main">
    <div class="title" />
    <div class="description />
  </div>
  <div class="sections">
    <div class="section">
       <div class="title" />
       <div class="description" />
    </div>
    <div class="section">
       <div class="title" />
       <div class="description" />
    </div>
  </div>
</div>

```

In my stylesheets, my rules might then look like this:

```
.document .main .title { ... }
.document .sections .section .description { ... }

```

I like this. This approach has always worked well for me, and I think the increasingly specific selectors make it very clear what is what (almost like reading a sentence).

Recently however I was told that this approach is bad, and that I should do something like the following instead:

```
<div class="document">
  <div class="main">
    <div class="mainTitle" />
    <div class="mainDescription />
  </div>
  <div class="sections">
    <div class="section">
       <div class="sectionTitle" />
       <div class="sectionDescription" />
    </div>
    <div class="section">
       <div class="sectionTitle" />
       <div class="sectionDescription" />
    </div>
  </div>
</div>

```

The reason is that it avoids any ambiguity in what the class 'title' refers to.

I am curious what people here think? Is my approach bad (ie confusing, problematic) ? Is there a preferred way to format css for complex markup?