Rules for XHTML and CSS naming and creation

Use "Structural naming" rather than "Presentational naming"

• Example: "gadget-column" rather than "left-column"
• Reason: "left-column" might not always float to left (in future it might float to right)
• Preferred way: "gadget-column"

Be more explicit when writing CSS selectors or addressing global elements. Try not to write global tag selector outside *root* CSS files

• Example: Do not have following CSS in erp5_knowledge_pad.bt

  •   h1{ color: red;} 

• Reason: In system that use this bt5 all header 1(h1) will be *red* which is not expected
• Preferred way:

  •   div.gadget div.block h1 { color: red;} 

Avoid using id HTML tag attributes and respective CSS selectors except if absolutely sure that they will be the only one in generated HTML page

• Example: listbox arrows use ID and if we have 2+ gadgets showing listbox navigation we have duplicate IDs andinvalid HTML page
• Preferred way: use class selectors 'button.listbox_next_page' rather than '#listbox_next_page'

Stick to a convention to naming classes and IDs and their filenames as well .css / .jss

• Example: in ERP5 we have following conventions for their naming:
  • hiddenLabel
  • hidden_label
  • hidden-label

• Reason: not clean & confusing

• Use "-" as a separator like "hidden-label" or "erp5-knowledge-pad.css"

Do not shorten filenames

• Example: "bt-add.png"
• Preferred way: "button-add-gadget.png"

Avoid using inline CSS styles

• Example:

  •   <th style="border-width: 0pt 1px 1px;">

• Reason: impossible to customize except customize HTML rendering
• Preferred way: use class selectors like

  •  table.listbox th.listbox_label_line{
      border-width: 0pt 1px 1px;}

Avoid using '<imgs src="...."/>' tags for background images

• Reason: impossible to customize except customize HTML rendering
• Preferred way: use class selectors like

  • #add-gadgets{
      background:transparent url(km_img/bt-add.png) no-repeat scroll 0 0;}

Avoid using '<br/>', '<hr/> or '&nbsp;' tags for visual formatting

• Reason: impossible to customize except customize HTML rendering.
• Preferred way: use proper CSS declarations and proper HTML block tags