Condense CSS definitions and HTML DIVs - css

Question

I'm not sure if what I need is self-explanatory so I'll give it a try.
Please, before proceeding, do note that :
I'm using Twitter Bootstrap
I'm also making extensive use of LESS
So, I'm taking the upper navigation as an example. My code is :
<div class="navbar navbar-inverse navbar-fixed-top" style='-moz-box-shadow: 0 3px 10px #888; -webkit-box-shadow: 0 3px 10px #888; box-shadow: 0 3px 10px #888;'>
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<a class="brand" href="http://www.google.com"><img alt="This is an image" src="<?= base_url('library/img/logo-2.png'); ?>" width="200"/></a>
<ul class="nav pull-right">
<li class="active"><i class="icon-home icon-lightgray"></i> Home</li>
<li><i class="icon-th icon-lightgray"></i> Themes</li>
<li><i class="icon-wrench icon-lightgray"></i> Tools</li>
<li><i class="icon-align-right icon-lightgray"></i> Blog</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<i class="icon-user icon-lightgray"></i> Log In<b class="caret"></b>
<ul class="dropdown-menu">
<li>An Item 1</li>
<li>An Item 2</li>
<li>An Item 1</li>
<li>An Item 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
So, I'm thinking - "What do we have here?" :
4 nested DIVs
Lots of "redundant" classes (I'm not using navbar or navbar-inverse or navbar-fixed-top in any other place, and that's the only combination I'm interested in).
What I'm trying to do
In a few words, I could imagine the very same thing written something like (or even more) :
<div class="navigation">
<a class="brand" href="http://www.google.com"><img alt="This is an image" src="<?= base_url('library/img/logo-2.png'); ?>" width="200"/></a>
<ul class="nav pull-right">
<li class="active"><i class="icon-home icon-lightgray"></i> Home</li>
<li><i class="icon-th icon-lightgray"></i> Themes</li>
<li><i class="icon-wrench icon-lightgray"></i> Tools</li>
<li><i class="icon-align-right icon-lightgray"></i> Blog</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<i class="icon-user icon-lightgray"></i> Log In<b class="caret"></b>
<ul class="dropdown-menu">
<li>An Item 1</li>
<li>An Item 2</li>
<li>An Item 1</li>
<li>An Item 2</li>
</ul>
</li>
</ul>
</div>
You may not find much use to that, but I still believe it'd make my pages far more readable (in terms of code).
So, how would you go about that?
Disclaimer : Please excuse the somewhat weird nature of this question. For someone who still likes writing his own compilers/interpreters/languages for every single bit he doesn't like in the existing ones, I think it's kinda excuseable. :-)