views:

152

answers:

4

The HTML standard defines a clear separation of concerns between CSS (presentation) and HTML (semantics or structure).

Does anyone use a coding standards document for CSS and XHTML that has clauses which help to maintain this separation? What would be good clauses to include in such a coding standards document?

A: 

I'm not sure I understand what sort of document you want? Leave presentation markup (width, border, font, etc) out of HTML...

Chris Marasti-Georg
A: 

Go to the CSS Mastery book website. Click on the Download Book Examples link. Unzip it, under the Chapter 01 directory, you will see a StyleGuide directory. This would be a good example of what you are looking for.

Dale Ragan
+1  A: 

We don't have a physical document we all adhere to where I work. There are a number of guidelines we try and keep in mind but there isn't really enough information to require a physcial document. This article sums them up these guidelines pretty well. You may also consider formatting your CSS to make it easier to read. Smashing Magazine has a great article on this subject.

Lee Theobald
A: 

The article referred to by @Lee Theobald is a good start.

Some basic ideas I try to keep in mind when marking up:

Regarding html:

Try to write for the next person - that is, think about how easy or difficult it might be for someone else to come and pick up your work and carry on.

To support this principle, you should try and make sure your markup is as legible as possible - class and id tags in particular should relate as much as possible to their intended content. In other words, try to use your tags to describe the kind of content they will have.

For example, "Sub-navigation", "content" etc.

The aim is to provide markup that someone can pickup having not looked at before and get a sense of the logical structure of the document.

Also, try to avoid the addition of markup that is purely to achieve a visual effect. But bear in mind that any website that requires even slightly sophisticated styling is unlikely to be able avoid non-semantic markup, due to weaknesses in current implementations of CSS and browser-compatibility issues.

Regarding CSS files:

Many people divide their css up into sections using comments, separating them into functional or structural areas. So you might have a section for your header, your footer, or typography and so on. Others take this further and split css across files, having one for typography, one for layout etc. However, this can according to Yslow! can have a negative impact on page loading, due to increased http requests.

I could write more, but as you can see I struggle to be concise. I hope this is of some use to you.

-Sam

Sam Murray-Sutton