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

Question

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.

Answer 1

If I were doing this, I would be using WebKit's DOM-inspector extensively (available in Safari or Chrome by right-clicking on a page and selecting Inspect Element). I expect it would help a lot with both wrapping your mind around the node/class/id structure, as well as helping to debug the new css as you're writing it.

It's much more convenient than just looking at the source, because it's in tree view, and nodes are collapsed by default. And it has some very useful features for inspecting the metrics (width/height/padding/border/margin) of nodes, as well as showing what style applies to them, in what order, and the final style being used.

Answer 2

I would suggest using the Firebug plug in for Firefox. You can use this to preview changes to the CSS by editing the existing CSS while viewing the page in the broweser without making permanent changes to the CSS file. YOu will alos get an idea of the "Cascade" of styles etc.

A very handy tool aswell for javascript debugging.

Answer 3

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.