Web development, coding & SEO

Best practice html css coding

Here are some best practices in HTML and CSS coding settled out in everyday's life. All this may to feel trivial and so elementary. From the other hand, there are hard core programmers who haven't had any contact with the front end stuff previously. They want to hear about some basic rules. Without any reasoning what and why.

Must

Do not nest inside <p> element other block level elements like <p> or <div>.
It's OK to nest inside <p> inline elements like <span> <em> <strong>.

Do not nest inside <ul> or <ol> elements anything other than <li> elements.
It's OK to nest inside <li> element other elements like <p> <div> <span> <em> <strong>.

Do not nest inside <a> element other <a> elements or block level elements like <p> or <div>.
Keep the whole <a> element - start tag, content and end tag, on one line.

Keep the whole <span> element - start tag, content and end tag, on one line.

No line breaks in inline elements.
No line breaks inside attribute declarations.

In empty elements (element without a closing tag) leave 1 space before the closing slash. Like <br /> <img /> <input />.

Do not leave inside tags any loose quotation marks or any other characters.

Replace special characters with HTML entities, like "&" is "&#38;" and ">" is "&#62;" and "£" is "&#163;" etc. Encouraged - learn and use numeric values instead on alphabetic aliases.

Recommended

Allow common sense and exceptions.

Floating

Free-flow vs float:

• All elements on the same level should be either in free-flow or floated. One floated - all floated.
• Avoid sandwitching floated and unfloated elements.
• Encapsule unfloated elements in to floated elements.
• Reasons to float:
  • Floating helps to precise-position elements on design-pages.
  • Floating makes a layout stabile as floated elements aren't influenced by properties of other elments.
  • Floating ensures consistent appearance of a page across browsers and platforms.
  • Floating is preventive coding. No surprises will reveal later on.
  • Floating results in simpler style sheet. Less hacks and work arounds.

Positioning through floated divs. Apply to elements:

	float:[left][right];
	width:[auto][100%][px];

Float requires a width declared, always. If no width is set, the results can be unpredictable.

Styling

Prefer unique class names over generic and universal ones. Use camelCase. Think of hierarchy.

Prefer classes in styling.
Prefer identifiers (id) in scripting.

To make the CSS more readable, each selector has to have it's own set of declarations. Do not bundle selectors.

To make the CSS more readable, put on each line only one declaration.

Arrange attributes in tags, and properties in selectors, alphabetically.

Insert new bits of styling in the beginning of the style sheet, right after the defaults. So the new declarations can't override and change previous styling elsewhere.

Usage of styling

Syling of basic elements <p> <ul> <table> etc. is used for

• global style, like font size, line-height, margin-bottom. Aim is to fix the default parameters across the browsers. Avoid styling <span> and <div> elements.

Styling through classes is used for

• appearance and positioning,
• alterations from global defaults.

<span> elements through classes are used to style

• appearance inside other elements.

<div> elements through classes are used for

• positioning the bits of layout.

Setting up a CSS for a site

Starting with a new website, there are four steps in setting up a style sheet.

1. Reset all default styling as every browser interprets HTML elements by it's own taste.
2. Set default styling for all recurring HTML elements in use on the site. Like BODY, A, P, etc. This shouldn't reflect any page specific properties, just universal declarations here. Exception can be H1 if it's used only once, for the site logo, and in that case it would be wise to keep H1 separate from defaults at all.
3. Global styling. Style and mark up main & unchangeaple framework for the entire site. That section includes the first tier custom elements like header, body, main and aside residing inside the body, footer.
4. Add rest of styling as it comes up in course of work.

Sounds like banging up, but over again, avoid generic class names like "label". On a medium website there are 58 totally different in appearance items that can be named semantically a "label". Use unique names as much as possible. The "commentLabel" and "commentorLabel" and productLabel are still semantic.

1. Final CSS becomes much shorter.
2. CSS is more easy to read and understand.
3. Maintenance is less time consuming and thus costs twice less.
4. CSS is less prone to errors caused by messy overriding.
5. Site overall performance is better because CSS is easier to interprete for a browser.

More misc. notes

Do not use in file names spaces and/or upper-case letters, even not in the names of images.

Do not style HTML elements for individual bahavior, like a{font-size:1em;}.

2010.

---