Flexible CSS – Combining Classes vs Descendant Selectors

Separating semantic and presentational code is a great idea, however sometimes it’s worth not going 100% by the book.
For content like text and images I am finding, that a bit more HTML (XHTML) markup can save lots of time in the long run.
For example a floated image and some text:
XHTML which is short and sweet:

<div id="main-content">
<h1>Header <span>(some additional words)</span></h1> 
<p>Some text...</p>
<img src="..." />
<p>Some more text...</p>

and CSS using descendant selectors:

/*style for all h1 specifying text color, font size, font type, margins*/
h1 {color:#F00;font:25px "Times New Roman", Times, serif;margin:20px 0;}
/*using descendant selector for additional text within h1*/
h1 span {font-size:14px;}
/*using descendant selector for image within main content column*/
#main-content img {float:right;margin:0 0 20px 20px;border:1px solid #666;}

When I consider updating the content, changes for marketing purposes and fulfilling all client’s wishes, I always end up making same kind of changes, heading bigger for page 1, text within heading even smaller for page2 and no margin below the heading on that page as well, image full column width and no border (here the left margin is causing me problems and I need to remove the border), etc…
Therefore I am benefiting in the long run more from a markup which is slightly longer, but more flexible. Creating predefined classes which I can reuse in other sites and also can combine with each other to get the same outcome:

slightly longer XHTML but allowing much more flexibility:

<div id="main-content">
<h1 class="color01 serif margin-top margin-bottom">Header <span class="small">(some additional words)</span></h1> 
<p>Some text...</p>
<img src="..." class="content-image-right margin-left margin-bottom border" />
<p>Some more text...</p>

and CSS with predefined classes which can be reused on other sites:

/*reusable styles for all headings specifying only font size*/
h1 {font-size: 25px;}
h2 {font-size: 23px;}
h3 {font-size: 21px;}
h4 {font-size: 19px;}
h5 {font-size: 17px;}
h6 {font-size: 15px;}
/*reusable styles for any text - font sizes*/
.xxsmall {font-size: 10px;}
.xsmall {font-size: 12px;}
.small {font-size: 14px;}
.medium {font-size: 16px;}
.large {font-size: 22px;}
.xlarge {font-size: 26px;}
.xxlarge {font-size: 32px;}
/*reusable margin styles*/
.margin-left {margin-left:20px;}
.margin-right {margin-right:20px;}
.margin-top {margin-top:20px;}
.margin-bottom {margin-bottom:20px;}
/*reusable float styles*/
.content-image-left {float:left;}
.content-image-right {float:right;}
/*text styles which I am creating specificly for each site*/
.border {border:1px solid #666;}
.serif {font-family:"Times New Roman", Times, serif;}
.color01 /*RED*/ {color:#C00;}