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:

• 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开发者_Python百科 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.

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.

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.

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.

We are just beginning a massive reskinning effort at my work - some 13000 JSP pages, with the application being over 1.5 million lines of code.

I laughed my behind off at our first planning meeting because for the most part, everyone was assuming we are going to do a manual refactoring of each page. Manual refactoring would be the absolute last thing I would consider doing - it's the most expensive way of doing it that produces the least benefits. You get a version of the software that doesn't make reskinning any easier and yet has to be maintained in parallel for the rest of time. In other words, you get a liability.

Anyway, what I am going to be proposing is to create or find a utility that will scan the HTML output of the JSP pages so that it can capture the actual final CSS being used on every element. This will avoid us having to write our own CSS parser that mimics the rules of CSS selectors, etc. Instead, we will get the full final list of every CSS value for each element and write this information out to a set of database tables. From there, we can analyze the CSS looking for commonalities that we can then write out as shared classes or mixins (using SASS), and write the rest out as element specific classes that use those shared definitions.

After all of the CSS is output, the tool will then rewrite the JSP files with the appropriate CSS classes on each element.

It should be noted that there are very few commonalities among any of the pages in question. I figure as we fine tune the tool over several iterations, we can perhaps get to the point where we can identify specific portions of a page as belonging to a set of page level components like Panels, Field Groups, Containers, etc. If we can identify these elements in each page, we can eventually inject actual reusable components in place of the existing HTML.

I'm thinking this is probably the only valid approach that has a chance at converting the pages with some level of confidence that nothing is getting broken. We wouldn't be changing the HTML element structures at all, so initially, the output of the tool should appear exactly as it currently does, but with the structure in place that will enable us to start making changes to appearance across the entire application with single point edits to the correct classes, etc.

Towards this end, I have already located a tool that may do exactly what I am describing - it's from LinkedIn, and it is named CSS Blocks. They mention another tool that is used to optimize the CSS named OptiCSS (sounds like 'optics'), but apparently it is not quite ready for prime time.

Anyway, I hope some of this makes sense and can be useful. Feel free to email me with questions or comments.