HTML and CSS Best Practices

Web Standards and Browser Compatibility

OFBiz HTML and CSS code should strive to conform to the latest W3C standards. Browser-specific extensions should be avoided.

If a particular browser does not conform to the latest standards, then the HTML/CSS code should strive to produce a usable web page with that browser. In other words, OFBiz developers should not "dumb down" the user interface to support a non-conforming browser, yet someone using a non-conforming browser should still be able to use OFBiz.

The internal applications (all of the managers) should work well in standards compliant browsers. Don't worry too much about coding to older browsers in those applications.

The public/customer facing applications (such as eCommerce) should be initially developed to be standards compliant and work in standards compliant browsers. However, for these applications we can't stop there. The fact is, much of the consuming public uses a variety of browsers and it is necessary to create sites that work well with them. Doing so shouldn't break the standards compliant code, but it may require browser-specific variations in order to work well with the needed browsers

HTML Guidelines

HTML should be well structured, concise, and free of styling information. Well structured HTML is easily styled with style sheets (CSS) - therefore all styling code should be kept in the style sheets.

Using HTML tables for general layout should be avoided. There are HTML "element collections" within OFBiz that need a table style layout (such as forms), so their use in those cases is acceptable. As future CSS/HTML standards come out, the use of tables for layout should disappear.

All HTML should pass validation.

CSS Guidelines

Style sheets should be concise and organized.

Build from the bottom up. Assign common properties to basic HTML elements first, then embellish the elements with additional selectors (CSS inheritance).

Give the class names/selectors meaningful names that describe what they are styling. Class names should be easily understood by non-technical people - such as graphics artists. Class names should not imply positioning or styling. Examples of improper class names: "topRightButton" "leftMenuBar" "boldRedText" - those all imply position/style.

Recurring HTML element collections (navigation bars, button bars, screenlets) should be styled as a whole - using contextual or descendant selectors. In other words, styles should be applied to containers, and the container's style should style all of the elements it contains.

Be consistent with property values. Use EMs for sizing - which allows the page to be resized gracefully. Use the hex notation for colors - which allows a graphic artist to search/replace colors.

HTML/CSS Testing Guidelines

Test your code on several browsers, then change the browser's settings (such as default font size). Reverse the layout direction (CSS direction: rtl; ). Change the language. Resize the browser window - make it really tiny. The page should make sense under any circumstance.

After you're satisfied that your HTML/CSS code will display correctly under any circumstance, run the page through a validator to catch any errors.