CSS样式表代码整理工具推荐

从嘀咕上,偶然看到介绍的千鸟所谈的CSS样式表书写格式,很受启发。该种写作方式,结构清晰,在视觉上一目了然,省却了很多的麻烦。作者在博客上也总结了几点:

分类,一个模块或者同类功能定义为一类定义,每类定义之间用段落隔开; 分级,每类定义中的每个定义语句,根据结构或语意级别使用Tab缩进纵向对齐; 分断,每个定义内的每个属性定义之间,用“分号+空格”隔开; 连排,每个定义不换行,一直横排。


怎么样才能快速,准确的在到上述的代码书写格式呢?幸好有DreamWeaver,里面一个代码整理功能,好像是cs4里出现的吧,经过设置之后,可以达成连排,但是却不能分级。

使用Styleneat 重新组织CSS介绍的Styleneat从新组织成千鸟介绍的CSS书写格式,只需要一点点的设置就可以了。

选择Single Line Formatting就可以生成横排的CSS,Multi-line Formatting是每个属性一行的。下面是生成的代码。

下面的截图是选择Multi-line Formatting后生成的代码。无论是横排还是竖排,都有很多支持者,我的习惯是在书写的时候,用竖排,最终发布的时候选择横排,在书写的时候,有时代码就会写的很乱,这时该工具的用处就显现出来了。但是可惜的是DreamWeaver还不支持CSS代码的缩进,如果可以的话,那就无比方便了。

P.S.以上截图工具使用的是PicPick,一款免费但功能强大的截图软件。

CSS样式表代码整理工具推荐》上有3条评论

  1. movoin

    呵呵,用软件做这个没太大必要吧~~~
    养成习惯可能会比较好一点
    而且建议将开发版和发布版采用不同的处理,开发时讲究可读性及可复用性所以以这种方式可以,但发布讲究的就只是一个速度了,建议还是使用一个压缩CSS和JS的工具来压缩一下吧~~~

    回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注