The bulk of the code for the Sheep Game has been untouched since 2001, when I updated from Flash 4 to Flash 5. I’ve had a couple of attempts at rebuilding the game, but never quite managed it.

With the tests I’ve done in the last few years (playing with AS3.0 and Unity) I always thought it would be to make a 3D version of the game, but it’s never quite come together.

In the last week I’ve put together the following demo: http://www.david-lewis.com/test/SGJS/ when you look at it you might just think “erm, that looks like the old game except I can’t resize it”, and you’d be correct. I’d be happy if you thought that because that demo has been written from scratch using only HTML, JS and CSS. I think this is where the new version of the game will come from.

When it comes to producing a richer user experience, the combination of HTML, JS and CSS has always been the poor cousin of Flash + ActionScript. I’m starting to see that this situation will change as technology like HTML5 + CSS3 settle and we all continue to play with things like Raphael and jQuery

This demo has shown me that I can produce something that is Flash like in around 10 hours, that works on every modern browser (yes this demo even works in IE6), and it was great fun to produce.

From this I hope to use the SheepGame to deliver a professional looking game using the fundamental technologies of the WWW.

In the last 3 years I have worked in larger and larger teams and I’ve found the following guidelines quite useful for making the change from solo developer to a member of a team.

Some General Rules to keep in mind

• Working in a team, you have to surrender some of your personal preferences when writing your CSS (eg comments style, how you format the document, and how you build the directory structure).
• Expectaion should be that by looking at the web page, you can predict the CSS code before you look at the source file, and that you can quickly scan the CSS file to find what element is being styled.
• The basis of good CSS needs to be in consistently written HTML, if HTML is inconsistent you will end up writing CSS to compencate. More code means more difficulty in maintenance.
• Be consistent with the CSS file, don’t mix formatting styles or selector styles. If you lose consistency it will make the developer have to stop and think each time consistency is broken. This will slow you down.
• If you are going to be maintaining the CSS after site launch: Out of the selector and the style defined, the selector is more important to you. The formatting of your document should reflect this.

Bear in mind that these rules can’t always work for you, but try to follow them if you can.

Stock standard CSS

Use reset, and a common way to measure fonts. Establish the font measurements and stick to them.

What CSS to put on what area of the page

Layout

Layout should only deal with the grid layout for the page, therefore you shouldn’t need anything more that widths, floats, position… maybe some padding or margins.

Site Furniture, Modules and page specific content

These are similar in concept. This makes up the majority of your page, you should avoid setting explicit widths on modules, allowing the layout to take care of how wide modules and furniture should be.

Formatting code and consistent selectors

These two areas need to be consistent, once they are you will be able to quickly scan your CSS document to find which rules are applying to which elements

Formatting code

• One line, alphabetical order of properties (I know alphabetical is anal)
• Don’t indent your code, the approach to using the selectors will automatically take care of that.

Selectors

• Try to keep general style rules for tags to a minimum.
• Begin all your selectors from the same place, and begin them from either the layout, furniture, module or page specific root. eg (.module .heading .h3 {} .group .item .)
• Be as descriptive as you can be with you selector
• Only make a general rule if you are confident it’s not going to cause problems with other elements

Dealing with Hacks

Don’t use hacks inline with the stylesheet, seperate them out and put them in a seperate style sheet.

In getting myself up and running I’ve chosen to use the rather lovely jQ theme by devolux.