Existing web-site CSS replacement (re-skinning) best-practices without changing the HTML
- by Enigmativity
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.
