Writing Friendly Code - Part 2, Principles | WebReference

Writing Friendly Code - Part 2, Principles

home / web / dev / clockwise OverviewPrinciplesDueling BrowsersSafety NetXFilesValid HabitsLayoutNamesStyle RulesHTMLLast Word

The Clockwise Box (Principles)

  1. Keep the HTML simple. Aim at the lowest, dumbest, homeliest, least likely to succeed of all clients. Build on a solid base.
  2. Wrap everything you can in a container, and name the containers.
  3. Put client specific code in linked style sheets and source scripts.
  4. Write valid code. Write valid code. Write valid code.

About containers - there are three types of elements in HTML, from a formatting point of view. These are: block level elements, those with tags like <p> and <h1>; inline elements like <img>; and phrase elements, like <strong> or <b>. Inline and phrase element tags are applied to a piece of content as it lies, and do not by default display on a separate line in a browser. Block level elements are just that - separate blocks of content that are always separated by new lines from the content before and after their start and end tags.

A block can contain any number of inline elements, but generally new block level content cannot be included in a block - a <p> cannot contain another <p>. You can contain any number of blocks in a <div> element, however, including other divs. If you want to contain inline content you can wrap it in a <span> element. You can put each word or character in a sentence in its own <span>, and style or script each span, if you care to.

Put a block level element in a <div> container and inline elements between <span> tags. If you are applying a single formatting style or effect to several paragraphs, you can enclose them all in a single <div> and define its style however you like. If you establish a style for a Website from a common style sheet, you can define specific "sub styles" for these containers. Blocks of <P> tags that have a standard font-weight and margin can inherit the <div> style of the section you wrap them in.

In my newsletter reader example, I have a "pageClass" for most of the pages and a "coverClass" for the first page. Both classes inherit the same styles for the <body> and <p> elements but have individual backgrounds. There is a rule in the style sheet that overrides the generic rule for links on the cover page:

.coverClass a {font-size:1.2 em}

This makes the links on the cover page larger than the default size.

Something to keep in mind when you are writing style rules - use the default values whenever you can. Different users get used to the way their particular machines present things, like the button color or the default fonts. Don't change anything unless you have a good reason. Easier for you, friendlier for your users.


Dueling Browsers  Next Page

OverviewPrinciplesDueling BrowsersSafety NetXFilesValid HabitsLayoutNamesStyle RulesHTMLLast Word

Comments are welcome


URL: http://webreference.com/dev/clockwise/clockwise1.html