Existing web-site CSS replacement (re-skinning) best-practices without changing the HTML

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

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.

Solution

crimson_penguin and Jon P have both suggested good tools to use, so I'll throw a bit of general advice in for you.

Here's what I'd do in your situation, although it's by no means THE solution.

First of all, know how you'd like the end product to look. Get a design ready so you know from the beginning where you want to end up. Don't skimp on any details either, "The more you sweat in training, the less you bleed in battle"

Secondly, get familiar with the current CSS as you'll be getting very intimate with it soon. Re-order everything if you feel it necessary to something you're more comfortable with, perhaps by grouping things together that act on particular hierarchies.

For example:

#navigation {....}
   #navigation #left {....}
     #navigation #left h1 {....}
     #navigation #left p {....}
   #navigation #right {....}

Once you have a design and know the current code, start making some changes. Start with simple, low-level elements first such as a block of text or an image. Then you can build up around these. As the two previous posters mentioned, Firebug (for Firefox) and the DOM-Inspector (for Safari/Chrome) can be very helpful as you can try things out on the page without committing to anything until after you've seen how it looks.

It's a long and potentially stressful process, but with a bit of patience and perseverance you'll get there in no time.