Providing PHP Programming Services to Design Professionals

Interested in Electronics?

Check out James' Embedded AVR/Arduino Development, and New Zealand Electronic Component Store

Commmon CSS Foibles 

In recent times I've seen more and more of the designers I work with producing reasonable attempts at XHTML 1.0 Transitional layouts, not a font tag to be seen, and tables-for-layout only used sparingly (I'm not a fundamentalist on this, tables for layout are fine by me if they are done right).

However, it seems that many designers have developed a few common bad CSS habits, I suspect it's simply that they don't have a full appreciation of the power that CSS  selectors and rules offer them.

ID Overuse

Designer's seem to simply LOVE id selectors (#foo { .... }), everything is id this, id that, id the other.  The problem with this is two fold, firstly many designers don't realise that you can only use an id once per page (and rightly so!), when they come to make something else use that same id, there is a problem.  The second side of the coin is that one-instance-per-page means that using id's as your primary selection method means the CSS gets a LOT of repetition.

The better alternative is to not use ID's but CLASSES instead.

Example: a design uses things like #banner1 and #banner2 but they can both be made simply .banner { .... } which defines the common stuff between them, and if the previously banner2 needed to differ in some way then a CSS rule can be added (.banner.otherClass { .... }) to change only the things that need changing for the otherClass of banner (the html for the other banner is <div class="banner otherClass"></div>).

Pointless Wrapping (Divitis)

I see this a lot, especially with headings, a designer will produce html like <div id="heading"><h1>....</h1></div>, or even more common they omit the h1 and just rely on the div for everything.

Designers need to recognise and make better use of the html heading elements h1 h2 etc by firstly using them, and secondly by not wrapping them in needless divs - they are already block elements and are already "heading" tags, you don't need to say <div class="heading"><h1>..</h1></div> it's just redundant information, simply <h1>...</h1> gives the same information, "this is the heading". 

Use CSS to style your h1 how you want it styled, almost certainly you want your h1's to appear the same across the site anyway, and if there are some areas of the site that should display an h1 differently, then consider using a different header level, or if h1 really is the best fit then use some well selected CSS, something like .sideBar h1 { ... }

Lists are there to be used

Designer's often forget about the ul, ol and dl HTML list structures, instead they use lots of meaningless divs, or worse, <br /> tags inside paragraphs.  When designer's are designing, then they need to think, is this a list-of-something (a list of specifications, a list of search options, a list of menu items, a list of....), then try and make it a list either a ul, ol or dl.

dl lists are the poor underutilised cousin in the list trio, but judicous use of CSS can make a dl list into a really useful thing.

Use the Force

Remember that CSS gives you the ability to a number of "selector" methods, if we limit to IE6 Windows compatable (oh how I wish we didn't have to, CSS2 Selectors without crummy javascript hacks would be the bees knees)  then you can use combinations of the following...

  • * - matches any element
  • h1 - matches an <h1>
  • h1, h2 - matches either an <h1> or an <h2>
  • table h2 - matches <h2> inside a <table>
  • h1.foo - matches <h1 class="foo">
  • h1.foo.bar - matches <h1 class="foo bar">, also <h1 class="foo bar more here">
  • .foo - matches any element with foo class
  • .foo.bar - matches any element with both foo and bar class 
  • .foo, .bar - matches any element with foo or bar class
  • h1#foo - matches <h1 id="foo">, but only one element per page
  • #foo   - matches any element with id foo, but only one element per page

And you can combine these in many ways to produce complex selections, for example...

  table.orders th.price { text-align:right; }   table.orders tfoot tr.grandTotal th.price { color:red; }

... to make the th cells with class price in the "orders" table be right aligned, and also make the ones in the tfoot section which are in the grandTotal row be colour red (and remain right-aligned).