What is the best way to write a contract for CSS usage in Web Development?

Question

Our Dev team had been developing enterprise web page more than 2 years ago. We are curious to know what is the best way to write a contract for CSS usage. For example, if we have a COMP, how we agree on a contract so our developers and our designers agree and we don't have to go back.

Is there a tool that is available for this type of technical writing?

What is the threadhold of information put in the CSS versus on the HTML page? Some of our designers thing that some things should go directly into the HTML page. The general opinion is that everything that is style should go in a CSS and all else in the html.

Thanks for your input.

Answer 1

Well, if a webpage has very specific CSS just for itself, I guess there is an argument for defining the CSS in the page, otherwise I would always have the CSS in an external file.

Try to avoid or at least minimise in-lining the CSS as a style attribute on HTML elements though, that would be a PITA to manage.

Most pages will be template driven with standard content styles, and thus the CSS styles will be defined in external files.

One thing you might want to think about are the number of CSS files - some people suggest that you should minimise this to just one file site-wide or per-template (or area of the site) to minimise HTTP requests to the server and avoid delayed CSS loading and funny looking styling up until that point.

So this "contract for CSS usage" is actually just a coding standard for HTML pages?

Answer 2

I'm a purist, so for me HTML is for content and structure and CSS is for layout & styling. That's really what each of them were created for.

See CSS Zen Garden for a great example of this. Same HTML and hundreds of different layouts & designs.

What are the reasons your designers give for styling to be in the HTML?

Edit: The main goal here is consistency across the site, correct? The more you have abstracted away from each page, the fewer changes you'll have to make.

Answer 3

If I have style that is for a one time, single use page, I will consider putting it in the header of that page, as my templating system allows for that.

However you should never use inline styles. Even if you do a page with a block in it for a one off. That way should you find that you "one time" item becomes a site wide style, you can simply move the CSS into the external CSS file and not edit the content.

Answer 4

The idea that the HTML should merely encode information and not style is called semantic markup. It has several advantages that you already know about, like separation of concerns, and a few that you probably haven't thought about.

If you stick to the web standards and separate your style and content you will also end up with a page that is more accessible to those with disabilities.

If you need to have some things styled differently for a specific page, use separate CSS include file for that page only and then use a CSS class on the element you want to style.