Joe Song » CSS

HTML and CSS Development Guidelines

josephsong — Thu, 18 Feb 2010 17:23:29 +0000

*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:

Write enough markup and style definitions to make it clear to other developers what is happening.
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.

should always be written as , but but or 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 declaration.
Tables are used only for tabular data, not for layout.
Stylesheets are included in the of the page.
Stylesheets are included using 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 .

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 and the declared for other elements as percentages.
```
body { font-size: 13px; }
h1 { font-size: 125%; }
```

WestlawNext.com

josephsong — Sun, 31 Jan 2010 23:00:25 +0000

The Site: Thomson Reuters, the leading provider of legal and business research products, needed a site to promote the launch of their newest product, WestlawNext.
http://westlawnext.com

The Client: Thomson Reuters’ clients are savvy and busy. They knew that if the site was going to reach them, it had to be fast, solid and engaging.

My Role: Developer in small, focused group to create the prototype and an on-site advisor during integration with their existing systems.

The Technology: The client needed to integrate the site into their CMS but they had asked us to create and test a prototype site before handing it over. We built the original with very limited PHP since we knew TR would be using .NET in the end but PHP allowed our team to quickly build the prototype. The site uses a custom Flash video player and also has a limited but useful mobile version. This mobile version was very important to the client as the majority of their customers regularly use BlackBerrys and other mobile devices. During integration a few technical hurdles appeared from use of their legacy systems but because I was on-site at the time, launch was not affected.

The Highlights: Multiple video players used in conjunction with jQuery UI tabs. Animated main navigation.

Avoiding flickering in jQuery when animating elements which contain Flash

josephsong — Mon, 18 Jan 2010 21:28:55 +0000

So, we had this issue when were were using slideToggle (and it would apply to slideDown) where the Flash movie contained inside the element we were animating would flicker once the animation is complete.

What’s happening: While animating, jQuery needs to add a few style definitions if they are not already declared. Among these is the ‘overflow’ property. jQuery sets this to ‘hidden’ in order to show the animation and then removes this declaration upon completion of the animation. When the declaration is removed, Flash gets the signal to re-render the movie (because, possibly, the layout of the page has changed).

How to fix it: declare ‘overflow:hidden’ in the CSS for the element. Voilá, the flickering is gone.