Seems like what you're describing here is BEM (Block/Element/Modifier) - those interested can read more about it here: http://csswizardry.com/2013/01/mindbemdi

Seems like what you're describing here is BEM (Block/Element/Modifier) - those interested can read more about it here: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ http://csswizardry.com/2013/01/mindbemding-getting-your-head... Basically it's anti-nesting and proposes being very specific with regards to class naming: .block{} .block__element{} .block--modifier{} I've experimented a bit with this lately but haven't come to a conclusion yet myself. Yes, it does decrease the chances of accidently styling the wrong elements, but it also makes the html more verbose and can in some cases make it more difficult to implement the website w/jQuery (because of the different classes in use, ie. instead of a .selected class you might have .selected__orange, .selected__apple so to switch the selected item you can't just do an .removeClass('selected')/.addClass('selected)