如果多个设计师或者开发者一起合作完成一份XHTML/CSS模版，那么通常会有好几种方法，来让合作变得更为有效。一些人喜欢在编码后面添加注释，留下很长一串看起来很烦琐的内容，让他们的合作者去跟进。还有一些人，将他们的注释写入其他文件，伴随着编码一同给合作者，或者通过Basecamp进行交流。
今年的24种方式，是我想与大家一起分享的一种技术，并且我已经在
Stuff and Nonsense有效地实行过。不幸的是，这并没有收录到
Transcending CSS一书中去。“CSS产品注释”这个技术，让你的产品注释页以一个XHTML文件在一个方便的地方展示，无需其他辅助工具，就能更有意义。
让我们先从基本的开始：在一群人之间的交谈。在XHTML中，如果缺少注释和交谈的元素，你就需要制作一个XHTML混合物，去更有效地在设计师和开发者之间添加有意义的谈话内容。像每个人说话那样，在这里你需要两个元素去描述“说了些什么”，以及“是由谁来说的”：<blockquote>和它的引证特性。
<blockquote cite="andy">
<p>This project will use XHTML1.0 Strict, CSS2.1 and all that malarkey.</p>
</blockquote>
- Source: /code/css-production-notes/1.txt
超过一个人说话时，你需要为这个谈话建立一个时间上的次序。再者，元素要做的，是在XHTML中已经存在的；粗陋有序的清单。
<ol id="notes">
<li>
<blockquote cite="andy">
<p>This project will use XHTML1.0 Strict, CSS2.1 and all that malarkey.</p>
</blockquote>
</li>
<li>
<blockquote cite="dan">
<p>Those bits are simple and bulletproof.</p>
</blockquote>
</li>
</ol>
- Source: /code/css-production-notes/2.txt
在列表中，添加一个新的注释，就像添加一个新的项目那样的简单。如果你喜欢在每个注释里都添加许多的信息（比如说，类似日期或者时间），也没有问题。将你的注释列表放在你文件来源命令的底部，在结束的<body>标签前。这个方式比起在编码中使用传统的注释的优势是，所有的注释都不是突出显示的，而且都集中在一个地方，而不是凌乱地贯穿了你的整个文件。
基本的CSS式样
第一步，你要在注释区域里，添加一些基本的式样，以有序的列表开始。这项设计，我是以外观为基础，感觉像一个即时通讯的窗口。
ol#notes {
width : 300px;
height : 320px;
padding : .5em 0;
background : url(im.png) repeat;
border : 1px solid #333;
border-bottom-width : 2px;
-moz-border-radius : 6px; /* Will not validate */
color : #000;
overflow : auto;
}
-
ol#notes li {
margin : .5em;
padding : 10px 0 5px;
background-color : #fff;
border : 1px solid #666;
-moz-border-radius : 6px; /* Will not validate */
}
-
ol#notes blockquote {
margin : 0;
padding : 0;
}
-
ol#notes p {
margin : 0 20px .75em;
padding : 0;
}
-
ol#notes p.date {
font-size : 92%;
color : #666;
text-transform : uppercase;
}
- Source: /code/css-production-notes/3.txt
看看这里的 第一个例子。
你可以在这里停下来了，但是不能看到是谁留下了这个注释，这需要有点上下文的关系。所以接下来，从<blockquote>的引证属性中，提炼出注释者的姓名，并且通过利用产生的内容，再每个注释前面展示。
ol#notes blockquote:before {
content : " "attr(cite)" said: ";
margin-left : 20px;
font-weight : bold;
}
- Source: /code/css-production-notes/4.txt
更多有趣的详细的式样
现在，所有的信息和基本式样都已经到位，是时候用一些有趣的、更详细的样式去修饰你的注释。让我们先为每个人添加一个图标，然后在他们的引证上也这样重复添加一次图标。首先，所有的<blockquote>的开头的第一段，都包含了一个引证属性，给出了普通的样式。
ol#notes blockquote[cite] p:first-child {
min-height : 34px;
padding-left : 40px;
}
- Source: /code/css-production-notes/5.txt
跟随一个个人背景图片。
ol#notes blockquote[cite="Andy"] p:first-child {
background : url(malarkey.png) no-repeat 5px 5px;
}
- Source: /code/css-production-notes/6.txt
如果你喜欢更多一点的互动，在每个<blockquote>后，添加一个a :hover的状态，或许可以突出最新的注释。
ol#notes blockquote:hover {
background-color : #faf8eb;
border-top : 1px solid #fff;
border-bottom : 1px solid #333;
}
-
ol#notes li:last-child blockquote {
background-color : #f1efe2;
}
- Source: /code/css-production-notes/7.txt
你也可以以每个人工作的部分为基础，调整每个注释的式样，比如：
<li>
<blockquote cite="andy" class="designer">
<p>This project will use XHTML1.0 Strict, CSS2.1 and all that malarkey.</p>
</blockquote>
</li>
<li>
<blockquote cite="dan">
<p>Those bits are simple and bulletproof.</p>
</blockquote>
</li>
-
ol#notes blockquote.designer { border-color : #600; }
-
- Source: /code/css-production-notes/8.txt
看看第二步的结果。
利用CSS配置，显示和隐藏注释
现在你的注释看起来非常的好，是时候将你写的XHTML/CSS注释的原形隐藏起来了，你可以在你需要的时候再把它们释放出来，无需JavaScript。开始将注释的规则列表从顶部挪开，只留下可以看见的几个象素。这也是一个非常好的想法，通过利用对浏览者不透明的特性，去让他们半透明性，去实现它。
ol#notes {
position : absolute;
opacity : .25;
z-index : 2000;
top : -305px;
left : 20px;
}
- Source: /code/css-production-notes/9.txt
你要做的最后一步是去添加:hover和:focus动态伪类，在视口的顶部重新配制列表，并且在需要时，修复全部的不透明性，去展示它们。
ol#notes:hover, ol#notes:focus {
top : 0;
opacity : 1;
}
- Source: /code/css-production-notes/10.txt
