This is a nice idea, but your css is horribly inefficient (using `.nav ul.actions li a` as a selector for example). I'm also a bit of a convert to http://smacss.com/ - make your html/css a bit more declarative rather than relying on nested selectors to apply rules.
Agreed, the CSS is really inefficient, for every anchor tag, the browser has to traverse the DOM up to the root element 6 times (not including the hover rules) ... It's a shame that so many developers don't know this (it's not very intuitive though).
CSS optimization should be the last thing a developer does, if at all. Most of the time, it's not worth it.
As a general rule, just be as concise as possible. `.nav ul.actions li a` could be turned into `.actions a` as long as it's alright for the .action anchor tags not in the .nav element to have the same style. But if you use .actions elsewhere and want the .actions list to look different in .nav, that's fine.
Thanks for sharing! I'm always looking to improve my code and I have to admit, LESS has really allowed me to write less code, but at the cost of producing longer reference chains. :)
Just in case the parent was misinterpreted: I think "inefficient" is referring not to how space-inefficient the CSS is, but that it forces the browsers to do a lot of extra work. (In the vein of https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficie... )
