最前端

我的工作,我的生活,点点滴滴...

标签 ‘ CSSDoc

关于CSS的模块化注释、CSSDoc和CSS编辑技巧

当CSS文件超过1000 个人感觉行时,CSS就显得杂乱无章了,在添加新样式时,很难下手,不知道应该把新样式放到哪个位置,修改样式时更无从下手,甚至我们只能完全靠Firebug去定位。在这时候CSS注释就显得异常重要了,但单靠/**/这些普通的零星的注释,还是显得很杂乱。或许,我们可以这样注释:

 
/***************************************************************************************************
 * 
 * 一、样式重置
 * 
 ***************************************************************************************************/
html,
body { font-family: Arial,"宋体",sans-serif; margin: 0; padding: 0; font-size: 12px; color: #000; }
div,
form,
img,
ul,
ol,
li,
dl,
dt,
dd,
button,
input { margin: 0; padding: 0; border: 0; }
li { list-style-type: none }
img { vertical-align: top }
strong { font-weight: normal }
h1,
h2,
h3,
h4,
h5,
h6 { margin: 0; padding: 0; font-size: 12px; }
input { font-size: 12px; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; text-align: center; }
em { font-style: normal }
/****************************************************************************************************
 * 
 * 二、常用图标
 * 
 ***************************************************************************************************/
/***************************************************
 * 1、表格操作图标
 **************************************************/
.ico-new,
.ico-add,
.ico-copy,
.ico-edit,
.ico-save,
... { background: url(../images/ico.png) no-repeat; width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
.ico-new { background-position: -120px 0px }
.ico-add { background-position: 0px -90px }
.ico-copy { background-position: -30px -90px }
.ico-edit { background-position: -60px -90px }
.ico-save { background-position: -90px -90px }
...
 
/***************************************************
 * 2、工作台和底部工具条图标
 **************************************************/
.ico-tip,
.ico-alert { width: 16px; height: 16px; display: inline-block; background: url(../images/msg-icons.png) no-repeat; }
.ico-alert { background-position: 0 -330px }
.ico-tip { background-position: 0 -360px }
 
/***************************************************
 * 3、表格排序图标
 **************************************************/
.ico-sort,
.ico-asc,
.ico-desc { background-image: url(../images/ico.Png); width: 19px; height: 19px; display: inline-block; vertical-align: middle; }
td .ico-sort,
td .ico-asc,
td .ico-desc { float: right }
/***************************************************
 * 4、分页图标
 **************************************************/
.page-icon { width: 16px; height: 18px; background: url(../images/page-icons.png) no-repeat; display: inline-block; vertical-align: middle; }
.iconNext { background-position: 0 0 }
.iconLast { background-position: 0 -20px }
.iconBack { background-position: -30px 0 }
.iconFirst { background-position: -30px -20px }
 
 
/***************************************************************************************************
 * 
 * 三、提示信息
 * 
 ***************************************************************************************************/
.msg-inline,
.msg-inline .msg-default { display: inline-block; *display: inline; *zoom: 1; }
.msg-block { display: block }
.msg-default { padding: 0 15px 0 26px; border: 1px solid #ffdd75; background: #FFFDD9; position: relative; min-height: 20px; _height: 20px; }
.msg-icon { float: left; width: 16px; height: 16px; overflow: hidden; margin: 1px 5px 1px 0; font-size: 0; line-height: 0; background: url(../images/msg-icons.png) no-repeat 0 -160px; position: absolute; left: 5px; top: 1px; }
.msg-title { display: inline; padding-right: 2px; font-weight: bold; }
.msg-close {  text-align: center; position: absolute; right: 1px; top: 1px; width: 14px; height: 13px; overflow: hidden; margin: 1px; }
.msg-close:hover { text-decoration: none; color: #CF6A0A; cursor: pointer; }

另外,我们还可以这样注释:

/**
 * 全局通用样式
 * 
 * 包括 浏览器样式的重置,通用的类,icon,按钮等
 * 
 * @project ECP
 * @version 2.1
 * @author  UED MIC
 * @copyright 2011 MIC
 * 
 * @colordef #fff;white
 * @colordef #000;blcak
 */
/**
 * @section 样式重置
 */
html,
body { font-family: Arial,"宋体",sans-serif; margin: 0; padding: 0; font-size: 12px; color: #000; }
div,
form,
img,
ul,
ol,
li,
dl,
dt,
dd,
button,
input { margin: 0; padding: 0; border: 0; }
li { list-style-type: none }
img { vertical-align: top }
strong { font-weight: normal }
h1,
h2,
h3,
h4,
h5,
h6 { margin: 0; padding: 0; font-size: 12px; }
input { font-size: 12px; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; text-align: center; }
em { font-style: normal }
/**
 * @section 常用图标
 */
/**
 * @subsection 表格操作图标
 */
.ico-new,
.ico-add,
.ico-copy,
.ico-edit,
.ico-save,
... { background: url(../images/ico.png) no-repeat; width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
.ico-new { background-position: -120px 0px }
.ico-add { background-position: 0px -90px }
.ico-copy { background-position: -30px -90px }
.ico-edit { background-position: -60px -90px }
.ico-save { background-position: -90px -90px }
...
 
 
/**
 * @subsection 工作台和底部工具条图标
 */
.ico-tip,
.ico-alert { width: 16px; height: 16px; display: inline-block; background: url(../images/msg-icons.png) no-repeat; }
.ico-alert { background-position: 0 -330px }
.ico-tip { background-position: 0 -360px }
/**
 * @subsection 表格排序图标
 */
.ico-sort,
.ico-asc,
.ico-desc { background-image: url(../images/ico.Png); width: 19px; height: 19px; display: inline-block; vertical-align: middle; }
td .ico-sort,
td .ico-asc,
td .ico-desc { float: right }
/**
 * @subsection 菜单折叠图标
 */
.iconUp,
.iconDown { background: url(../images/menu-icons.png) no-repeat; width: 20px; height: 20px; display: inline-block; vertical-align: middle; }
/**
* @subsection 分页图标
*/
.page-icon { width: 16px; height: 18px; background: url(../images/page-icons.png) no-repeat; display: inline-block; vertical-align: middle; }
.iconNext { background-position: 0 0 }
.iconLast { background-position: 0 -20px }
.iconBack { background-position: -30px 0 }
.iconFirst { background-position: -30px -20px }
 
/**
* @section 提示信息
*/
.msg-inline,
.msg-inline .msg-default { display: inline-block; *display: inline; *zoom: 1; }
.msg-block { display: block }
.msg-default { padding: 0 15px 0 26px; border: 1px solid #ffdd75; background: #FFFDD9; position: relative; min-height: 20px; _height: 20px; }
.msg-icon { float: left; width: 16px; height: 16px; overflow: hidden; margin: 1px 5px 1px 0; font-size: 0; line-height: 0; background: url(../images/msg-icons.png) no-repeat 0 -160px; position: absolute; left: 5px; top: 1px; }
.msg-title { display: inline; padding-right: 2px; font-weight: bold; }
.msg-close {  text-align: center; position: absolute; right: 1px; top: 1px; width: 14px; height: 13px; overflow: hidden; margin: 1px; }
.msg-close:hover { text-decoration: none; color: #CF6A0A; cursor: pointer; }

哈,是不是有点像JavaDoc?PHPDoc抑或是JSDoc?很久之前貌似就有人研究这个CSSDoc,并且现在已经有一个基于Ruby的项目了。CSSDoc还有很多tag,比如@bugfix,@affected,@link,@see,@since,@date等,大家可以去研究一下。但这种注释方法给程序读是比较合适而且专业,但视觉上总感觉没第一种写法那么模块化,我们写CSS更关注的是易于管理与维护。还好,Aptana3有一个很漂亮的小功能,如下图:

aptana css edit

我们可以给每个模块加上一个书签,或者加上一个任务(任务还可以分完成与否),并且还显示CSS错误。红色表示错误,绿色表示书签,蓝色表示任务。不错吧,非常完美!另外有一个叫做CSS Edit的IDE,也是异常的强大,可以把CSS分块变成文件夹管理,如下图:

css edit