CSS class inheritance: the way I would expect it to work

Disclaimer: I am a CSS newbie. So don't take this blogpost as an expert opinion. On the other hand, that gives me the unique point of view of someone with no predispositions on how things should work.

The problem

In my opinion, the purporse of CSS is to free the programmer from layout issues whilst keeping the freedom of layout with the designer. The way this works is as follows:

The programmer writes code that outputs HTML, eg:

<div class="foo">
<p class="bar">
Hello, world. This is a very short paragraph!
</p>
</div>

The designer then can make sure this looks nice without having to touch the html, like:

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}

What bothers me with that?

Well, I think the programmer should not be aware of the CSS class structure that the designer will use or is using. Imagine a programmer making a main menu:

<div class="my-main-menu">
<ul>
<li>butter</li>
<li>cheese</li>
<li>eggs</li>
</ul>
</div>

The designer might like to use a CSS structure like:

.menu {
  background-color: white;
  color: black;
}

.horizontal-menu {
  float: left;
}

Suppose the designer wants to lay out the main menu as a horizontal menu. This requires him to write the following CSS code:

.my-main-menu {
  background-color: white;
  color: black;
  float: left;
  font-size: larger;
}

What I would like him to write is something like:

.my-main-menu {
  inherit: .horizontal-menu;
  font-size: larger;
}

What he needs to do with the way CSS is currently working:

1) he needs to write the custom site code:

.custom-menu-extension {
  font-size: larger;
}

2) he needs to tell the programmer what classes to use:

<div class="menu horizontal-menu custom-menu-extension">
<ul>
<li>butter</li>
<li>cheese</li>
<li>eggs</li>
</ul>
</div>

This approach violates the very idea of separating code and design. There is a tradeoff between either giving up your "modular" css structure or giving up separation between code and layout.

The solution

As you see above, I would add an "inherit" property to a class. This would include the definition of the inherited class to the newly defined class. In this way, programmers would only need to assign 1 class to each piece of content (instead of the clutter of divs / class names we see in current HTML). Designers could then declare that class using their favorite CSS framework as a basis and expand it with the specific properties for the given content and website.

Of course I could be missing the point, since my CSS experience is very limited. I'dd like to get more suggestions in the comments.