Optimal Cascading suggestions needed

[SilverLining]

Problem: I've been told that I add way to many bespoke divs when I want to style something up. This is true. Often I'll just create a new style, instead of taking advantage of the "C" in CSS.

My question to you is what are your Guidelines for people who are crossing the brige from messy CSS to optimal, minimal, Cascading style sheets.

This will probably include the planning of a website, so please keep the broader picture in mind.

[SuzyUK]

Hi SL,

you know I don't know of any surefire method of planning the "optimal cascade" in regards to planning an entire site

I think controlling the "divitis" is part of the learning process. When you get that aha moment where you realise you can get rid of one div because it's already nested or targetted by some other element then that's the start.

personally I advocate things like the csszengarden challenges, or more likely these days WP blog templates, i.e. grab someones nice source code and see how many different ways you can make it look (play to learn ;)), browse what others have done with the templates - I know blog templates source can differ, but if you find an author with a series of designs, you will more than likely find that the source code does not differ very much, and usually they all have pretty much the same "ingredients".

Mainly my guidelines would be start at the outside (top) and work in (down).
Set up the main content areas with ID's - and only nest 'bespoke' divs if there is not a targetable element (by ID or class) easily available, - e.g. there is no need to set up div id ="mainnav" just to nest a single <ul> in, just give the UL the ID.

Think in blocks if it's sidebar or post sections, set up and reuse a content block class within these areas for sure, you can always differentiate the blocks by page or area on the page - by going right to the top of the tree and applying a class/ID to the html, or body elements - any oddities can then be targetted using the same content classes as the general site template uses, differentiating by getting specific with the body ID/class

anyway it really depends, but I'd check out the better known blog template sites and view the source code.. things like clearing divs are common and nested wrappers are popular to give secondary styling hooks or they often have legitimate bug busting uses too! .. look for patterns

Suzy