Bymnosteome
New Member
Here's an example of some markup:\[code\]<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>\[/code\]In my stylesheets, my rules might then look like this:\[code\].document .main .title { ... }.document .sections .section .description { ... }\[/code\]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:\[code\]<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>\[/code\]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?