I can see a number of other good answers to questions relating to CSS best-practices on stack overflow:

• How to Manage CSS Explosion
• CSS Conventions / Code Layout Models
• Are there any CSS standards that I should follow while writing my first stylesheet?
• What is the best method for tidying CSS?
• Best Practices - CSS Stylesheet Formatting

But I think I have a different problem.

I'm trying to "re-skin" an existing site that has been nicely built using div's and ul's, etc, and it has a good existing CSS file, but when I start making changes to the CSS I quickly find that I break the layout. My feeling is that it is very hard to get a feel for how all the CSS will work together and indeed what CSS is affecting parent and sibling elements in the HTML.

So, my question is "what are the best-practices around re-skinning an existing web-site by replacing the CSS only and not modifying the existing HTML?" I can't change the classes, ids, node hierarchy, etc.

An example of the particular site that I am trying to re-skin is http://demo.nopcommerce.com/.

The existing CSS can be as complicated/detailed as this extract from the main CSS file:

.header-selectors-wrapper
{
    text-align: right;
    float: right;
    width: 500px;
}

.header-currencyselector
{
    float: right;
}

.header-languageselector
{
    float: left;
}

.header-taxDisplayTypeSelector
{
    float: right;
}

.header-links-wrapper
{
    float: right;
    text-align: right;
    width: 570px;
}

.header-links
{
    border: solid 1px #9a9a9a;
    padding: 5px 5px 5px 5px;
    margin-bottom: 5px;
    display: inline-table;
}

.order-summary-content .cart .cart-item-row td, .wishlist-content .cart .cart-item-row td
{
    border-bottom: 1px solid #c5c5c5;
    vertical-align: middle;
    line-height: 30px;
}

.order-summary-content .cart .cart-item-row td.product, .wishlist-content .cart .cart-item-row td.product
{
    text-align: left;
    padding: 0px 10px 0px 10px;
}

.order-summary-content .cart .cart-item-row td.product a, .wishlist-content .cart .cart-item-row td.product a
{
    font-weight: bold;
}

Any help would be appreciated.