HTML and CSS Development Guidelines

*NOTE – Feb 18, 2010: this is a work in progress. Very likely, there are points not yet included.

Philosophical Approach

The approach can be summed up in two points:

  1. Write enough markup and style definitions to make it clear to other developers what is happening.
  2. Write as little markup and style definitions as possible.

Let’s talk about what these mean.

Write enough markup and style definitions to make it clear to other developers what is happening.

We follow the principles of semantic web development which involves using markup to describe the data or content of a web page. In practice, this means things like using ol and ul tags to make lists of items instead of text delineated with br tags, and giving page elements class names that describe their function (eg “article-wrapper”) instead of class names that describe their appearance (eg “blue-background”).

Write as little markup and as few style definitions as possible.

Small file size and shallow markup heirarchy make the site faster to load and easier to maintain. To that end, we write as little markup and as few style as possible to make the page appear and function as necessary. In practice, this means things like using padding and margin to create space between elements instead of using br or empty p tags, and writing reusable CSS classes that add common traits (eg background-color) and can be used in conjunction with other reusable CSS classes that provide other common traits (eg font-size).

Rules

We have a few easy-to-follow rules for HTML and CSS development that have evolved from years of experience.

Rules for writing HTML
  • Block-level elements are  never be self-closing, even when empty.
    <div /> should always be written as <div></div>, but but <img /> or <span /> is proper.
  • Markup always validates unless there is a very good reason (eg for cross-browser support or CMS limitations).
    There are many validators but W3C’s is preferred: http://validator.w3.org/
  • Documents are written for HTML 5.
    Documents should use the the <!DOCTYPE html> declaration.
  • Tables are used only for tabular data, not for layout.
  • Stylesheets are included in the <head> of the page.
  • Stylesheets are included using <link /> tags, not @import statements.
    It is permissable, however, to use @import statements within an external stylesheet.
  • Markup should be indented using tabs, not spaces, so that the indentation matches the markup heirarchy.
  • CSS and JavaScript are included in external files, not written inline in the page.
  • External JavaScript files are included at the bottom of the page just before the </body>.
Rules for writing CSS
  • CSS is written a compact format characterized by the selector and all definitions on one line.
    Use http://www.codebeautifier.com/ to switch between formats; the format described here is called ‘High’ compression.
    Improper:

    .my-class {
	width: 300px;
	height: 300px;
}

    Proper:

    .my-class { width: 300px; height: 300px; }
  • Selectors use hyphens to delineate words, not camel case or underscores.
    Improper: .myClass or #my_element. Proper: .better-class
  • Hacks to make pages work correctly in Internet Explorer are included in a separate IE-specific stylesheet and included on the page using conditional comments.
  • During development, sites use a global stylesheet for universal definitions and separate sheets for independent areas or features of the site.
  • Use of style attributes in markup is avoided.
  • When possible (that is, when specific instances are known), .png transparency should be fixed for specific elements using the IE-6 specific stylesheet instead of using an .htc file as a behavior.
    Improper:

    a { behavior: url(iepngfix.htc); }

    Proper:

    a#button { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,      sizingMethod=crop, src='../images/button.png'); }
  • The default font size is declared in pixels for the <body> and the declared for other elements as percentages.
    body { font-size: 13px; }
h1 { font-size: 125%; }

Tags: , , , , , ,

This entry was posted on Thursday, February 18th, 2010 at 11:23 am by josephsong, filed under CSS, Development, HTML. You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.

Leave a Reply