CSS注释规范

——摘自《精通CSS：高级Web标准解决方案》

CSS注释以/*开头，以*/结束，这种注释称为C网格的注释。

注释可单行，可多行，可出现在代码中的任何地方。

/*  Body Styles */
body 
{
    font-size:67.5%; /* Set the font size */
}

 

1、添加结构性注释

创建新的样式表时，在开头添加一个注释块，描述这个样式表的用途、创建日期或版本号、创建者等信息。

/*--------------------------------------------------------------------
Basic Style Sheet (for version 4 browsers)

version:  1.1
author:  Crayon
email:  crayonchen@qq.com
website: http://www.cnblogs.com/crayonchen/
----------------------------------------------------------------------*/

 

 然后，将样式表分成几大块。

首先先编写一般规则，比如版式、标题和链接。

接下来，根据在文档流中出现的次序处理页面的主要部分。这通常包括品牌部分、主要内容、次要内容、主导航、辅助导航和页脚部分。

最后，处理在整个站点上无规律地出现的一般元素。这常常包括框样式、表单样式和图形按钮。

 

/* Typography
---------------------------------------------------------------------*/

/* 为了方便查找，一种改进的方法是在每个注释头中添加一个一般不会出现在CSS文件中的标志。*/

/* =Typography
--------------------------------------------------------------------*/

/* 搜索“=typ”就会立即找到。*/

 

Tips：可以创建一个预先加上注释的CSS模版供所有项目使用，节省时间。

 

2、自我提示

有时候，可能需要用某种技巧解决某个问题。在这种情况下，最好记录这个问题你使用的解决方案和解释这个修复方法的URL（如果有的话）：

/*
Use the star selector hack to give IE a different font size
http://www.cnblogs.com/crayonchen/
*/

* html body { font-size:75%; }

 

使用关键字来区分重要的注释——意外特性。

TODO 表示某些东西需要在以后进行修改、修复或复查；

BUG 表示代码或特定浏览器遇到的问题；

KLUDGE 表示并不完善的权宜之计；

TRICKY 表示提醒其他开发人员注意某些特别复杂的代码段。

/* :TODO: Remeber to remove this rule before the site goes live */
/* :KLUDGE: I managed to fix this problem in IE by setting a small negative margin but it's not pretty */
/* :BUG: Rule breaks in IE 5.2 Mac */

 

 

3、删除注释和优化样式表

注释会使CSS文件爱你显著加大，需要去掉一些注释。可以搜索替换或用小工具删掉注释、空白和额外的字节。